/*
* This program is free software; you can redistribute it and/or modify it under the
* terms of the GNU Lesser General Public License, version 2.1 as published by the Free Software
* Foundation.
*
* You should have received a copy of the GNU Lesser General Public License along with this
* program; if not, you can obtain a copy at http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html
* or from the Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* See the GNU Lesser General Public License for more details.
*
* Copyright 2017-2023 Hitachi Vantara.  All rights reserved.
*/
@font-face {
  font-family: 'OpenSansRegular';
  src: url('opensans-regular.eot');
  src: url('opensans-regular.eot') format('embedded-opentype'), url('opensans-regular.woff') format('woff'), url('opensans-regular.ttf') format('truetype'), url('opensans-regular.svg#OpenSansRegular') format('svg');
}

@font-face {
  font-family: 'OpenSansLight';
  src: url('opensans-light.eot');
  src: url('opensans-light.eot') format('embedded-opentype'), url('opensans-light.woff') format('woff'), url('opensans-light.ttf') format('truetype'), url('opensans-light.svg#OpenSansLight') format('svg');
}

@font-face {
  font-family: 'OpenSansItalic';
  src: url('opensans-italic.eot');
  src: url('opensans-italic.eot') format('embedded-opentype'), url('opensans-italic.woff') format('woff'), url('opensans-italic.ttf') format('truetype'), url('opensans-italic.svg#OpenSansItalic') format('svg');
}

@font-face {
  font-family: 'OpenSansBold';
  src: url('opensans-bold.eot');
  src: url('opensans-bold.eot') format('embedded-opentype'), url('opensans-bold.woff') format('woff'), url('opensans-bold.ttf') format('truetype'), url('opensans-bold.svg#OpenSansBold') format('svg');
}

:root {
  /* LAYOUT GLOBAL */
  /* Input height resizes with text zoom, as it is based on font size and line height.
     --input-outer-height = 33
        = 2 x border + 2 x vertical-padding + line-height
        = 17 + 2 + 14

     Use these classes directly on the rare cases where sibling content needs to be sized
     along with text and the resulting input's height, and no other means exists.
   */
  --input-border-width: 1px;
  /* V-padding should be 11px. With a line-height of 17px, height equals 30px, like the normal input */
  --input-padding-v: calc(1em * 5.5/var(--typ-body-font-size-px));
  --input-outer-height: calc(
      2 * var(--input-border-width) +
      2 * var(--input-padding-v) +
      1em * var(--typ-body-line-height-px) / var(--typ-body-font-size-px));
}

html,
body,
html.bootstrap body {
  margin: 0;
  padding: 0;
  font-family: OpenSansRegular, sans-serif;
  font-size: 14px;
  background: transparent;
  color: #333;
}


/* BASE FOCUS-VISIBLE RULES  */

:focus-visible,

/* Increase specificity to override Widgets.css focus rule (> 0-2-1) */
input:focus-visible:focus-visible:focus-visible,

/* Increase specif. to override bootstrap-namespaced.css (> 0-2-1) */
.bootstrap select:focus-visible:focus-visible,

/* Increase specif. to override bootstrap-namespaced.css (> 0-3-1) */
.bootstrap input:focus-visible:focus-visible:focus-visible  {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Use the `focus-ring-disabled` class on an element, to disable displaying the focus ring in its subtree.
   When in CSS, simply set --focus-ring to none in the desired scope.
 */
.focus-ring-disabled {
  --focus-ring: none;
}

/* FOCUS CONTAINER */

.focus-container {
  outline-offset: var(--focus-ring-offset);
}
@supports (selector(:has(div))) {
  .focus-container:has(:focus-visible) {
    outline: var(--focus-ring);
  }
}
@supports not (selector(:has(div))) {
  .focus-container:focus-within {
    outline: var(--focus-ring);
  }
}
/* Hide default focus ring on the element with the focus */
.focus-container :focus-visible {
  --focus-ring: none;
}

:focus-visible .active-descendant {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

a, a:link {
  color: #7C0B2B;
  text-decoration: none;
}

a:active, a:hover {
  text-decoration: underline;
}

strong,
b {
  font-weight: normal;
  font-family: OpenSansBold, sans-serif;
}

label {
  font-size: 13px;
}

label,
.gwt-Label {
  color: #414141;
}

div.pentaho-dialog.schedule-recurrence-dialog label {
  font-size: 14px;
}

legend {
  color: #333;
}

fieldset,
fieldset.xul-fieldset {
  padding: 0;
  width: auto;
  border: 1px solid #CCC;
}

input[type='checkbox'] {
  border: none;
}

input[type='radio'] {
  border: none;
}

.groupOption {
  padding-left: 0;
}

.bootstrap .pentaho-dialog p {
  margin: 0;
}

input:is([type="text"], [type="search"]),
textarea,
textarea.gwt-TextArea,
.bootstrap .pentaho-dialog input[type="text"] {
  border: var(--input-border-width) solid var(--color-atmo4);
  color: var(--color-secondary);
  padding: 0 10px;
  font-size: var(--typ-body-font-size);
  line-height: var(--typ-body-line-height);
  border-radius: 4px;
  font-family: opensansregular;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: var(--input-outer-height);
}

input[type='text']:focus,
.bootstrap .pentaho-dialog input[type='text']:focus {
  border-color: var(--color-secondary);
}

textarea:disabled,
input:not([type]):disabled,
input[type="color" i]:disabled,
input[type="date" i]:disabled,
input[type="datetime" i]:disabled,
input[type="datetime-local" i]:disabled,
input[type="email" i]:disabled,
input[type="month" i]:disabled,
input[type="password" i]:disabled,
input[type="number" i]:disabled,
input[type="search" i]:disabled,
input[type="tel" i]:disabled,
input[type="text" i]:disabled,
input[type="time" i]:disabled,
input[type="url" i]:disabled,
input[type="week" i]:disabled {
  background-color: var(--color-atmo2);
  color: var(--color-secondary-60);
  border: 1px solid var(--color-secondary-60);
}

div.povdiv input[type='text'] {
  padding: 4px 2px 4px 4px;
}

input[type='text']#paramNameTextBox,
input[type='text']#paramValueTextBox {
  padding: 2px 10px;
}

#filterDropDownGroupbox input[type='text'] {
  padding: 0;
}

input[type='text']#displayNameText {
  padding: 0px 10px;
}

input#rowsNumberInput,
div#widget_dijit_form_NumberTextBox_0 {
  margin-top: 3px;
}

input#dijit_form_NumberTextBox_0 {
  height: inherit;
}

SELECT,
.gwt-ListBox {
  border: var(--input-border-width) solid #CCC;
  padding: 0;
  font-size: var(--typ-body-font-size);
  overflow: auto;
  border-radius: 4px;
  background-color: #fff;
  color: #333333;
  font-family: opensansregular;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
SELECT[size="1"],
SELECT:not([size]),
.gwt-ListBox[size="1"],
.gwt-ListBox:not([size]) {
  height: var(--input-outer-height);
  line-height: var(--typ-body-line-height);
  padding: 0 30px 0 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(images/arrow_down_gray.svg) no-repeat;
  background-size: 12px 12px;
  background-position: right 8px center;
}
SELECT[size="1"]::-ms-expand,
SELECT:not([size])::-ms-expand,
.gwt-ListBox[size="1"]::-ms-expand,
.gwt-ListBox:not([size])::-ms-expand {
  display: none; /*hides dropdown arrow in IE*/
}

:is(select, .gwt-ListBox):is(:not([size]), [size="1"]):where(.height-auto) {
  /* Allow growing in height when text wraps.
     Browsers may defer slightly on the auto height depending on line-height
     and font-size. min-height provides some consistent at default font size.
   */
  min-height: var(--input-outer-height);
  height: auto;
  padding-top: var(--input-padding-v);
  padding-bottom: var(--input-padding-v);
}

form SELECT {
  padding: 0 5px;
}

select option,
.gwt-ListBox option {
  padding: 3px 10px;
  font-family: opensansregular;
}

select option:hover {
  color: #414141;
  background-color: #CCCCCC;
}

.IE .scheduleEditor SELECT {
  margin: 2px;
}

.IE .scheduleEditor FIELDSET TD {
  padding-top: 0px !important;
}

.adminField {
  margin-left: 4px;
}

table#contentCleanerPanel > tbody > tr > td > table {
  margin-top: 20px;
}

#filterControlsGroupbox {
  margin-left: -6px;
  width: 101.6% !important;
}

#ldapTestMsgDialog {
  max-height: none;
}

#ldapTreeDialogContent {
  padding: 0 4px;
}

input.ldapPasswordInput.authValue.adminField {
  height: auto;
}

.soria .dijitTreeRowSelected {
  background-color: #E6EFF6;
}

.soria .dijitTreeRowHover {
  background-color: #E6EFF6;
}

.dijitTreeRow {
  padding: 4px;
}

.groupOption input[type="text"],
.groupOption input[type="password"] {
  margin-left: 0px;
}

.gwt-PasswordTextBox,
input,
input[type="password"] {
  border: 1px solid #CCC;
  padding: 10px 10px;
  font-size: 14px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.gwt-PasswordTextBox,
input,
input[type="password"]:focus {
  border: 1px solid #414141;
}

.scroll-panel {
  position: relative;
  overflow: auto;
  height: 100%;
  width: 100%;
}

.pentaho-page-background {
  background: url('images/bg_page.png') repeat-x top left;
  background-color: #FFF;
}

.gwt-MenuBarPopup + .gwt-MenuBarPopup {
  margin-top: -1px;
}

div#data-controlproperties-spacer {
  width: 7px;
}

fieldset#filterDataGroupbox>table.vbox>tbody>tr>td>div,
fieldset#filterDropDownGroupbox>table.vbox>tbody>tr>td>div {
  margin: 4px;
}

textarea#sqlQueryText {
  margin-top: -10px;
  width: 252px !important;
  border-radius: 0;
}

div#editQueryButton,
div#mqlFilterEditButton {
  margin-right: 10px;
}

button#sqlParameterButton {
  margin-bottom: 19px;
  margin-right: 10px;
}

button#mqlFilterSelectDataSourceBtn {
  margin-bottom: 5px;
  margin-right: 10px;
}

button#mqlParameterButton {
  margin-bottom: 20px;
  margin-right: 10px;
}

table#mqlFilterSelectedColumns>tbody>tr>td>div {
  width: 250px !important;
}

div#filterDataDeck {
  height: 350px !important;
}

div#staticSelectionTable {
  margin-bottom: 110px;
}

div#filterTypeDeck>div>table>tbody>tr>td>div {
  width: 250px !important;
}

#editFilterDateRestriction, #editFilterPropDateFormat {
  margin-bottom: 5px !important;
}

#editFilterPropDateFrom, #editFilterPropDateTo {
  width: 95% !important;
  margin-bottom: 5px !important;
}

select#schedule-main-gwt-listbox {
  width: 112px;
  border-radius: 4px;
  margin-bottom: 15px;
}

table#email-yes-no-panel {
  margin-bottom: 8px;
}

table#email-yes-no-panel td {
  display: inline;
}

table#email-yes-no-panel td span,
table#email-yes-no-panel td div {
  display: block;
  margin-bottom: 10px;
}

table#email-schedule-panel {
  line-height: 14px;
}

table#email-schedule-panel input,
table#email-schedule-panel textarea {
  margin-bottom: 20px;
  width: 100%;
}

table#email-schedule-panel tr:nth-child(2) input {
  margin-bottom: 0px;
}

div#reportControlPanel select {
  margin: var(--focus-ring-padding);
}
div#reportControlPanel select[style*="overflow-y: scroll"] {
  height: auto;
  background: none;
}

form#REPORT_FORMAT_TYPE p {
  color: #666;
}

input[name="REPORT_FORMAT_TYPE"] + br {
  display: none;
}

input[name="REPORT_FORMAT_TYPE"] {
  margin: 0 3px 10px 1px;
}

table.recur-pattern-hp select {
  width: 130px;
}

table.pentaho-schedule-create,
div#toppanelinner {
  padding: 0;
}

div#promptPanel div.prompt-panel {
  padding: 4px 0 0 8px;
}

div#toppanel {
  margin-top: 20px;
}

div.parameter div.parameter-label {
  margin-bottom: 5px;
}

div#promptPanel div.parameter {
  margin-bottom: 10px;
}

div#reportControlPanel {
  margin: 0;
  border: none;
  background: none;
}

fieldset.schedule-editor-caption-panel {
  margin: 0;
  margin-bottom: 15px;
  padding: 10px 15px 15px 15px;
}

fieldset.schedule-editor-caption-panel table {
  border-spacing: 0;
  flex-wrap: wrap;
}

fieldset.schedule-editor-caption-panel legend {
  padding: 0 2px;
}

table.parameter_table fieldset.parameter_fieldset {
  margin-left: -9px;
}

table.parameter_table fieldset.parameter_fieldset input[type="radio"] {
  margin-left: 10px;
}

div#reccurence-label {
  margin-top: 0;
}

select.date-picker-select,
select.blockout-select {
  margin-right: 10px;
  border-radius: 4px;
  width: 70px;
}

div.blockout-label {
  margin-right: 20px;
}

button#wizard-finish-button {
  margin-left: 8px;
}

button#wizard-cancel-button,
select#day-of-week-lb,
input#day-of-month-tb {
  margin-left: 10px;
}

fieldset#schedule-start-date-input input,
input.start-date-picker,
input.end-date-picker {
  width: 131px;
  background-image: url('./images/calendar-white.png'), -webkit-linear-gradient(right, #CC0000, #CC0000 30%, transparent 30%, transparent 100%);
  background-image: url('./images/calendar-white.png'), linear-gradient(to left, #CC0000, #CC0000 30%, transparent 30%, transparent 100%);
  background-repeat: no-repeat;
  background-position: 90% 47%;
}

input.end-date-picker:disabled {
  background-image: url('./images/calendar-gray.png'), -webkit-linear-gradient(right, #E4E4E4, #E4E4E4 30%, transparent 30%, transparent 100%);
  background-image: url('./images/calendar-gray.png'), linear-gradient(to left, #E4E4E4, #E4E4E4 30%, transparent 30%, transparent 100%);
}

input.every-txtbox {
  width: 60px;
}

table.recur-pattern-hp td,
table#ror-inner-hp td,
table#end-date-panel td {
  vertical-align: middle !important;
}

table#end-date-panel {
  margin-left: 30px;
}

table#end-date-panel tr:not(:last-child) td {
  padding-bottom: 5px;
}

table#daily-recur-hp,
table#day-n-of-month-radio,
table#every-month-on-nth-day-radio,
table#radio-buttons-panel {
  margin-bottom: 10px;
}

#schedule-start-panel {
  flex-wrap: wrap;
  --flex-items: 1 1 0;
}

table#schedule-start-panel td,
table#blockout-start-panel td {
  padding-top: 0 !important;
}

.recurrenceRadioButton input[type="radio"] {
  margin: 0 5px 0 0;
}

.dailyRecurrenceRadioButton input[type="radio"] {
  margin: 0 5px 15px 5px;
}

.ignoreDstCheckbox input[type="checkbox"] {
  margin: 0 5px 0 0;
  padding-bottom: 7px;
}
div.pentaho-dialog.schedule-recurrence-dialog span.recurrenceRadioButton {
  margin-left: 0;
}

table.weeklyRecurrencePanel .startLabel {
  line-height: 14px;
}

table#weekly-recur span.day-of-week-checkbox {
  padding: 0;
}

table#weekly-recur span.day-of-week-checkbox input[type="checkbox"] {
  margin: 10px 5px 0 0;
}

table#weekly-recur tbody tr td:not(:first-child) span.day-of-week-checkbox input[type="checkbox"] {
  margin-left: 15px;
}

.schedule-name-info {
  display: flex;
  flex: auto;

  font-size: var(--typ-body-font-size);
}

div.cron-label {
  margin: 0 0 5px 0;
}

input#cron-tb {
  width: 225px;
  margin-bottom: 15px;
}

/* Standard button style. Should be applied to a <button> element to get full pseudo-styles. */
button.pentaho-button,
button.pentaho-button:link,
button.pentaho-button:visited,
button.pentaho-button:hover,
button.pentaho-button:active,
button.pentaho-button:focus,
.pentaho-button-like,
.pentaho-button-like:link,
.pentaho-button-like:visited,
.pentaho-button-like:hover,
.pentaho-button-like:active,
.pentaho-button-like:focus {
  background: white;
  filter: none;
  font-size: 14px;
  line-height: 20px;
  color: #cc0000;
  padding: 9px 14px;
  font-family: opensansregular, Helvetica, Arial, Sans serif;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 0 none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  border: 1px solid #cc0000;
}

button.pentaho-button#uploadMetaButton {
  line-height:10px;
}

button.pentaho-button:hover,
button.pentaho-button:active,
button.pentaho-button:focus,
.pentaho-button-like:hover,
.pentaho-button-like:active,
.pentaho-button-like:focus {
  background: #CC0000;
  border-color: #CC0000;
  color: #FFF
}

/* lighter gray with white text */
button.pentaho-button.disabled,
button.pentaho-button.disabled:link,
button.pentaho-button.disabled:visited,
button.pentaho-button.disabled:hover,
button.pentaho-button.disabled:active,
button.pentaho-button.disabled:focus,
button.pentaho-button[disabled],
button.pentaho-button[disabled]:link,
button.pentaho-button[disabled]:visited,
button.pentaho-button[disabled]:hover,
button.pentaho-button[disabled]:active,
button.pentaho-button[disabled]:focus,
.pentaho-button-like.disabled,
.pentaho-button-like.disabled:link,
.pentaho-button-like.disabled:visited,
.pentaho-button-like.disabled:hover,
.pentaho-button-like.disabled:active,
.pentaho-button-like.disabled:focus {
  background: #E4E4E4 !important;
  color: #999 !important;
  text-decoration: none !important;
  cursor: default;
  border: 1px solid #E4E4E4 !important;
}

div#FilterPanel div.povdiv {
  padding-left: 0;
}

.pentaho-toggle-button {
  background: transparent;
  font-size: 14px;
  color: #CC0000;
  padding: 4px 10px;
  border: 1px solid #CC0000;
  border-right: none;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  cursor: hand;
}

.pentaho-toggle-button:last-child {
  border-right: 1px solid #CC0000;
}

.pentaho-toggle-button-container .pentaho-toggle-button button,
.pentaho-toggle-button button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  font-family: OpenSansRegular, Sans;
  padding: 0 15px;
  font-weight: 400;
}

.pentaho-toggle-button-horizontal {
  margin: 0px 0px 2px 0px;
}

div#FilterPanel .pentaho-toggle-button-horizontal {
  display: inline-block;
}

.pentaho-toggle-button-single {
  border-radius: 4px;
}

.pentaho-toggle-button-horizontal-first {
  border-radius: 4px 0px 0px 4px;
}

.pentaho-toggle-button-horizontal-last {
  border-radius: 0px 4px 4px 0px;
}

.pentaho-toggle-button-vertical {
  margin: 0px 2px 0px 2px;
}

.pentaho-toggle-button-vertical-first {
  margin: 2px 2px 0px 2px;
  border-radius: 4px 4px 0px 0px;
}

.pentaho-toggle-button-vertical-last {
  border-radius: 0px 0px 4px 4px;
}

/* Applies the green glow to buttons */
.pentaho-toggle-button-up-hovering,
.pentaho-toggle-button-up:hover {
  background-color: #CC0000;
  color: #FFF;
}

/* Standard toggle-button style. Should be applied to a <button> element to get full pseudo-styles. */
.pentaho-toggle-button-down,
.pentaho-toggle-button-down-disabled,
.pentaho-toggle-button-down-hovering {
  background: #CC0000;
  color: #FFF;
  background-image: url(images/checkbox-hover.png);
  background-repeat: no-repeat;
  background-position: left 8px center;
}

.pentaho-toggle-button>.html-face {
  padding: 0 6px;
}

.pentaho-toggle-button-down + .pentaho-toggle-button-down,
.pentaho-toggle-button-down-disabled + .pentaho-toggle-button-down,
.pentaho-toggle-button-down-hovering + .pentaho-toggle-button-down,
.pentaho-toggle-button-up:hover + .pentaho-toggle-button-down,
.pentaho-toggle-button-up:hover + .pentaho-toggle-button-down-disabled,
.pentaho-toggle-button-up:hover + .pentaho-toggle-button-down-hovering,
.pentaho-toggle-button-down + .pentaho-toggle-button-up:hover,
.pentaho-toggle-button-down-disabled + .pentaho-toggle-button-up:hover,
.pentaho-toggle-button-down-hovering + .pentaho-toggle-button-up:hover {
  border-left: 1px solid white;
}

div#FilterPanel div.pentaho-toggle-button-down button {
  color: #293b44;
  background: transparent;
  border: none;
  color: inherit;
}

div#FilterPanel div.pentaho-toggle-button-up button {
  background: transparent;
  border: none;
  color: inherit;
}

/* region Responsive Primitives */

/* region GWT HorizontalFlexPanel, VerticalFlexPanel */
:where(.responsive) .gwt-h-v-panel {
  /* Panel structure:

     table.flex-row.gwt-h-v-panel.gwt-h-panel
       colgroup        ; display: none
       tbody           ; display: contents
         tr            ; display: contents
           td...       ; display: contents
             item

     table.flex-column.gwt-h-v-panel.gwt-v-panel
       colgroup        ; display: none
       tbody           ; display: contents
         tr...         ; display: contents
           td          ; display: contents
             item
   */

  /* Set to override the flex item's default flex.
     Or use one of the preset classes: flex-items-none, flex-items-auto */
  --flex-items: initial;
}

:where(.responsive) .gwt-h-v-panel:where(.flex-items-none) {
  --flex-items: none;
}

:where(.responsive) .gwt-h-v-panel:where(.flex-items-auto) {
  --flex-items: auto;
}

:where(.responsive) .gwt-h-v-panel > tbody {
  /* Backup and free --flex-items for use on a flex item itself, in case it's also a gwt-h-v-panel. */
  --priv-flex-items: var(--flex-items);
}

:where(.responsive) .gwt-h-v-panel > colgroup {
  display: none;
}

:where(.responsive) :is(
  .gwt-h-v-panel > tbody,
  .gwt-h-v-panel > tbody > tr,
  .gwt-h-v-panel > tbody > tr > td) {
  display: contents;
  flex: inherit;
}

/* Regular items (not flex containers) don't flex by default. */
:where(.responsive) .gwt-h-v-panel > * > * > * > :where(:not(.flex-row, .flex-column)) {
  flex: var(--priv-flex-items, none);
}

/* Container items having same direction of the panel inherit its flex by default.
   When changing direction, the child container's default flex of auto is used by default.
  */
:where(.responsive) .gwt-h-panel > * > * > * > :where(.flex-row),
:where(.responsive) .gwt-v-panel > * > * > * > :where(.flex-column) {
  flex: var(--priv-flex-items, inherit);
}

/* When container items have e.g. a width:100%, that used to refer to the old layout parent,
   before display:contents was used, which if having a fixed width would cause the item to not shrink enough
   if needed, compared to other items. */
:where(.responsive) .gwt-h-panel > * > * > * > :where(.flex-row, .flex-column) {
  width: auto !important;
}

:where(.responsive) .gwt-v-panel > * > * > * > :where(.flex-row, .flex-column) {
  height: auto !important;
}

/* endregion */

/* region XUL/GWT VBox, HBox */
/* XUL adds a wrapper div to each flex item.
   table.flex-row.gwt-h-v-panel.gwt-h-panel.hbox
       colgroup        ; display: none
       tbody           ; display: contents
         tr            ; display: contents
           td...       ; display: contents
             div       ; display: contents - wrapper
               item
  */
:where(.responsive.pentaho-xul-gwt) :is(.hbox, .vbox) > * > * > * > div {
  display: contents;
  flex: inherit;
}

:where(.responsive.pentaho-xul-gwt) :is(.hbox, .vbox) {
  --flex-item: initial;
  flex: var(--flex-item, auto);
}

/* Regular items (not flex containers) don't flex by default.
   Keep in sync with corresponding gwt-h-v-panel rule.
*/
:where(.responsive.pentaho-xul-gwt) :is(.hbox, .vbox) > * > * > * > * > :where(:not(.flex-row, .flex-column)) {
  --flex-item: initial;
  flex: var(--flex-item, var(--priv-flex-items, none));
}

/* Container items having same direction of the panel inherit its flex by default.
   When changing direction, the child container's default flex of auto is used by default.
   Keep in sync with corresponding gwt-h-v-panel rule.
  */
:where(.responsive.pentaho-xul-gwt) .hbox > * > * > * > * > :where(.flex-row),
:where(.responsive.pentaho-xul-gwt) .vbox > * > * > * > * > :where(.flex-column) {
  --flex-item: initial;
  flex: var(--flex-item, var(--priv-flex-items, inherit));
}

/* Do not flex vertically / stretch horizontally */
:where(.responsive.pentaho-xul-gwt .vbox) > * > * > * > * > .flex-item-h {
  --flex-item: none;
  align-self: stretch;
}
/* Do not stretch vertically / flex horizontally */
:where(.responsive.pentaho-xul-gwt .hbox) > * > * > * > * > .flex-item-h {
  --flex-item: auto;
  align-self: center;
}

/* Do not flex vertically / stretch horizontally */
:where(.responsive.pentaho-xul-gwt) .vbox > * > * > * > * > :where(button, .pentaho-button, .pentaho-button.disabled) {
  --flex-item: none;
  align-self: start;
}
/* Do not stretch vertically / flex horizontally */
:where(.responsive.pentaho-xul-gwt) .hbox > * > * > * > * > :where(button, .pentaho-button, .pentaho-button.disabled) {
  --flex-item: 0 1 auto;
  align-self: center;
}

:where(.responsive.pentaho-xul-gwt) :is(.hbox, .vbox) > * > * > * > * > :where(button, .pentaho-button, .pentaho-button.disabled) {
  min-width: 0;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

/* Ignore the cross size of items which are flex containers or which can flex in the cross axis */
:where(.responsive.pentaho-xul-gwt) .hbox > * > * > * > * > :where(.flex-row, .flex-column, .flex-item-v) {
  height: auto !important;
}

:where(.responsive.pentaho-xul-gwt) .vbox > * > * > * > * > :where(.flex-row, .flex-column, .flex-item-h) {
  width: auto !important;
}

/* Ignore the main size of items which are flex containers or which can flex in the main axis

   When container items have e.g. a width:100%, that used to refer to the old layout parent,
   before display:contents was used, which if having a fixed width would cause the item to not shrink enough
   if needed, compared to other items.

   On flex-wrap containers, ignore the main size of the box's container items,
   so that items shrink until min-size before wrapping happens.
 */
:where(.responsive.pentaho-xul-gwt) .hbox > * > * > * > * > :where(.flex-row, .flex-column, .flex-item-h) {
  width: auto !important;
}

/* Input text elements do not respect min-width when width is auto.
   Using 100% will result in the preferred size on an unbounded (100%) ancestor hierarchy (fit-to-content dialog),
   while still respect the min-width when space is not available or in fill-viewport-width mode.
 */
:where(.responsive) .hbox > * > * > * > * > :where(.xul-textbox) {
  width: 100% !important;
}

:where(.responsive.pentaho-xul-gwt) .vbox > * > * > * > * > :where(.flex-row, .flex-column, .flex-item-v) {
  height: auto !important;
}
/* endregion XUL/GWT VBox, HBox */

/* region XUL/GWT GwtDeck */
:where(.responsive.pentaho-xul-gwt) .deck-panel {
  min-width: 0;
}

:where(.responsive.pentaho-xul-gwt) .deck-panel > div {
  display: contents;
  flex: inherit;
}

:where(.responsive.pentaho-xul-gwt) .deck-panel > * > * {
  flex: inherit;
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
}
/* endregion XUL/GWT GwtDeck */

/* region XUL/GWT GwtGrid */
:where(.responsive.pentaho-xul-gwt) .gwt-grid {
  display: grid;
  gap: var(--layout-gap-v) var(--layout-gap-h);

  --grid-template-columns: initial;
  grid-template-columns: var(--grid-template-columns);
}

:where(.responsive.pentaho-xul-gwt) .gwt-grid > colgroup {
  display: none;
}

:where(.responsive.pentaho-xul-gwt) :is(
  .gwt-grid > tbody,
  .gwt-grid > tbody > tr,
  .gwt-grid > tbody > tr > td) {
  display: contents;
  flex: inherit;
}

:where(.responsive.pentaho-xul-gwt) .gwt-grid > * > * > * > * {
  --grid-row: initial;
  --grid-column: initial;
  grid-row: var(--grid-row);
  grid-column: var(--grid-column);
}
/* endregion XUL/GWT GwtGrid */

/* region XUL/GWT GwtLabel */
.xul-label-disabled {
  color: #666 !important;
}

:where(.responsive.pentaho-xul-gwt) .xul-label.multiline {
  --min-height: initial;
  --max-height: intial;
}

:where(.responsive.pentaho-xul-gwt) .xul-label:not(.multiline-specified) {
  white-space: normal !important;
}

:where(.responsive.pentaho-xul-gwt) .xul-label.multiline-specified:not(.multiline) {
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.responsive.pentaho-xul-gwt) .xul-label.multiline > .label-scroll-panel {
  width: auto !important;
  height: auto !important;
  min-height: var(--min-height, auto);
  max-height: var(--max-height, auto);
}

:where(.responsive.pentaho-xul-gwt) .xul-label.multiline > .label-scroll-panel > .xul-pre {
  flex: auto;
  width: auto !important;
  height: auto !important;
}
/* endregion XUL/GWT GwtLabel */

/* region XUL/GWT Classes */
:where(.responsive.pentaho-xul-gwt) .gwt-menu-list > :is(.custom-list, .custom-list-disabled) {
  flex: auto;
  width: auto !important;
  min-width: 15ch;
}

:where(.responsive.pentaho-xul-gwt) .radio {
  --layout-gap-h: 3px;
}

:where(.responsive.pentaho-xul-gwt) .radio .gwt-TextBox {
  flex: auto;
  padding: 0 10px;
  line-height: 22px;
  margin-top: -3px;
  min-width: 3ch;
  max-width: 10ch;
}

:where(.responsive) fieldset.xul-fieldset {
  padding: var(--layout-gap-v) var(--layout-gap-h);
  min-width: 0;
}

:where(.responsive) .xul-textbox.gwt-TextArea {
  flex: auto;
  height: auto !important;
}

:where(.responsive) :is(.xul-tree, .xul-tree > *, .xul-tree .gwt-ScrollTable) {
  width: 100% !important;
}
/* endregion XUL/GWT Classes */

/* region Modifiers: gap-, flex-, ... */
/* Need to duplicate this here, from base.css, so that these may override the above GWT flex panel rules */
.flex-none {
  flex: none;
}

.flex-auto {
  flex: auto;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

:is(.flex-column.flex-center-v, .flex-row.flex-center-h) {
  justify-content: center;
}

:is(.flex-row.flex-center-v, .flex-column.flex-center-h) {
  align-items: center;
}

/* Align the content at bottom, when using the flex-row */
.flex-row.flex-bottom {
  align-items: flex-end;
}

/* Align the content at bottom, when using the flex-column */
.flex-column.flex-bottom {
  justify-content: flex-end;
}

/* Other instances of this media query should have the comment: flex-column-sm breakpoint */
@media (max-width: 640px) {
  :where(.flex-row).flex-column-sm {
    flex-direction: column;
  }

  :where(.flex-row).flex-column-sm.flex-center-v {
    justify-content: center;
    align-items: unset;
  }

  :where(.flex-row).flex-column-sm.flex-center-h {
    align-items: center;
    justify-content: unset;
  }
}
/* endregion */

/* endregion */

/* DIALOG */
.pentaho-dialog,
.bootstrap .modal.pentaho-dialog {
  border: var(--dialog-border-width) solid #CCC;
  z-index: 1050;
  position: absolute;
  background: #FFF;
  padding: 20px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
  /*  overflow: auto !important;*/
  max-height: 90%;
}

/*
For IE 9 and IE10, need to add padding to the bottom of some dialogs generated with XUL
*/
.IE9 .pentaho-dialog#emailTestDialog,
.IE10 .pentaho-dialog#emailTestDialog {
  padding-bottom: 20px !important;
}

.bootstrap .modal.pentaho-dialog {
  margin: auto;
  width: auto;
  height: auto;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
  -webkit-background-clip: none;
  -moz-background-clip: none;
  background-clip: border-box; /*default*/
}

.pentaho-dialog #override-description {
  padding-bottom: 10px;
}

.pentaho-dialog#cannot-rename-dialog {
  width: 310px;
}

.pentaho-dialog#dialogOverrideFolder,
.pentaho-dialog#dialogRename {
  width: 495px;
}

.pentaho-dialog#dialogOverrideFile {
  width: 455px;
}

.pentaho-dialog#dialogRename INPUT {
  width: 100%;
}

.pentaho-dialog .Caption {
  background: none;
  font-size: 24px;
  line-height: 30px;
  font-family: OpenSansLight;
  color: #333;
  padding-bottom: 20px;
}

.pentaho-dialog .Caption .dialog-close-button {
  position: absolute;
  top: 6px;
  right: 6px;
}

.pentaho-dialog .button-panel.right {
  text-align: right;
}

.pentaho-dialog .button-panel.center {
  text-align: center;
}

.pentaho-dialog .button-panel {
  margin: 30px 0 0;
  padding: 0;
  width: 100%;
  height: auto;
}

.pentaho-dialog .dialog-content {
  padding: 0 !important;
  color: #333;
}

.pentaho-dialog .button-panel .pentaho-button {
  margin-left: 10px;
}

.pentaho-dialog .button-panel button,
.pentaho-dialog .button-panel button:link,
.pentaho-dialog .button-panel button:visited,
.pentaho-dialog .button-panel button:hover,
.pentaho-dialog .button-panel button:active,
.pentaho-dialog .button-panel button:focus {
  background: transparent;
  color: #cc0000;
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid #cc0000;
  padding: 8px 20px;
  line-height: 21px;
}

.pentaho-dialog .button-panel button:hover,
.pentaho-dialog .button-panel button:active,
.pentaho-dialog .button-panel button:focus {
  background: #cc0000;
  border-color: #cc0000;
  color: #FFF;
}

.dialog-button-panel {
  padding: 2px 0px;
}

/* The following classes are handing tons of intermediate and extraneous elements generated by the GWT dialog implementation */
.pentaho-dialog .dialogTopCenterInner {
}

.pentaho-dialog .dialogMiddleCenter {
  height: 100%;
}

.pentaho-dialog .dialogMiddleCenterInner {
  height: 100%;
  color: #777;
}

.pentaho-dialog .dialogMiddleLeft {
  display: none;
}

.pentaho-dialog .dialogMiddleRight {
  display: none;
}

.pentaho-dialog .dialogTopLeft {
  display: none;
}

.pentaho-dialog .dialogTopRight {
  display: none;
}

.pentaho-dialog .dialogBottomLeft {
  display: none;
}

.pentaho-dialog .dialogBottomRight {
  display: none;
}

/* Find a home for these */
.login-dialog {
  z-index: 2000;
}

.error-login-dialog {
  z-index: 2100;
}

/* region DIALOG RESPONSIVE - BEGIN */
/*
  Prompt Dialog      [overflow-y, max-width, max-height]
    Inner [min-width, min-height]
      Header/Caption   [v-flex: none, ellipsis]
      Content          [v-flex: auto, overflow]
        Inner...       [min-height]
      Buttons          [v-flex: none, ellipsis, wrap, align-end]

   See also JavaDocs for Pentaho GWT's DialogBox.DialogSizingMode (ds-), DialogBox.DialogWidthCategory (dw-)
   and DialogBox.DialogMinimumHeightCategory (dmh-).
*/
:where(.responsive).pentaho-dialog {
  /* DIALOG LOCAL variables - override on specific dialogs */

  /* Desired maximum OUTER width/height.
     Subject to design-system margins and viewport.
     Default to unconstrained.
   */

  /* Override or use one of the predefined dw- classes. */
  --dialog-max-width: 100vw;

  --dialog-max-height: 100vh;

  /* Desired min-width/height. Defaults are A11Y mins. */
  --dialog-min-width: var(--a11y-min-width);
  /* See also reference "Sync with --dialog-min-height" */
  --dialog-min-height: var(--a11y-min-height);

  --priv-dialog-borders-paddings: calc( 2 * var(--dialog-padding) + 2 * var(--dialog-border-width));

  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  /* Body and buttons' sections' H scrollbars shown when their content exceeds min-width. */
  overflow-x: hidden;

  /* Last resort V scrollbar, shown on very short viewports.
     Body V scrollbar appears first, when shorter than its children's total min-height.
   */
  overflow-y: auto;

  /* Use Grid System (GS) max width/height, unless it would violate defined dialog min/max settings.

     E.g. for FILL_VIEWPORT_WIDTH mode. The dialog would be as wide as the viewport minus the GS margins,
     yet no wider than the desired --dialog-max-width.
     By reducing the viewport width, eventually, the dialog width could become < min-width, to meet the GS margins.
     Instead, its min-width is respected, causing GS margins to eventually reach 0.
   */
  max-width: clamp(
      var(--dialog-min-width),
      calc(100vw - 2 * var(--dialog-ds-min-margin-h)),
      var(--dialog-max-width));

  /* Dialog cannot grow taller than the viewport. Show outer V scrollbar, instead. */
  max-height: min(
      clamp(
          var(--dialog-min-height),
          calc(100vh - 2 * var(--dialog-ds-min-margin-v)),
          var(--dialog-max-height)),
      100vh);

  padding: 0;
}

:where(.responsive).pentaho-dialog > * {
  flex: auto;
  display: flex;
  flex-direction: column;

  min-width: calc(var(--dialog-min-width) - 2 * var(--dialog-border-width));
  min-height: calc(var(--dialog-min-height) - 2 * var(--dialog-border-width));
}

/* Sync with --dialog-min-height to _switch_ from body to outer V scrollbar
   when reaching min height. */
@media (max-height: 256px) {
  :where(.responsive).pentaho-dialog > * {
    min-height: auto;
  }
}

:where(.responsive).pentaho-dialog:where(.dmh-content) > * {
  /* Disables body V scrollbar.
     Displays the outer V scrollbar when dialog H cannot accommodate the body's min-height.
   */
  min-height: auto;
}

:where(.responsive).pentaho-dialog:where(.ds-fill-viewport-width),
:where(.responsive).pentaho-dialog:where(.ds-fill-viewport),
:where(.responsive).pentaho-dialog:where(.ds-full-viewport) {
  /* Expand as much as allowed by max-width */
  width: 100%;
}

:where(.responsive).pentaho-dialog:where(.ds-fill-viewport),
:where(.responsive).pentaho-dialog:where(.ds-full-viewport) {
  /* Expand as much as allowed by max-height */
  height: 100%;
}

:where(.responsive).pentaho-dialog:where(.ds-full-viewport) {
  /* Ignore grid system max width/height */
  max-width: 100%;
  max-height: 100%;
}

:where(.responsive).pentaho-dialog:where(.dw-min) {
  --dialog-max-width: var(--a11y-min-width);
}

:where(.responsive).pentaho-dialog:where(.dw-text) {
  --dialog-max-width: calc(var(--text-block-max-width) + var(--priv-dialog-borders-paddings));
}

:where(.responsive).pentaho-dialog:where(.dw-xs) {
  --dialog-max-width: 448px;
}

:where(.responsive).pentaho-dialog:where(.dw-sm) {
  --dialog-max-width: 672px;
}

:where(.responsive).pentaho-dialog:where(.dw-md) {
  --dialog-max-width: 880px;
}

:where(.responsive).pentaho-dialog:where(.dw-lg) {
  --dialog-max-width: 1096px;
}

:where(.responsive).pentaho-dialog:where(.dw-xl) {
  --dialog-max-width: 1300px;
}

:where(.responsive).pentaho-dialog .Caption {
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--dialog-padding);
}

:where(.responsive).pentaho-dialog .dialog-content {
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: var(--focus-ring-padding) var(--dialog-padding) var(--dialog-padding) !important;
  height: auto !important;
  width: auto !important;
  gap: var(--layout-gap-v) var(--layout-gap-h);
}

:where(.responsive).pentaho-dialog .button-panel {
  flex: none;
  overflow: hidden;
  width: unset;
  margin: 0;
  padding: var(--dialog-padding);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: end;
  gap: var(--layout-gap-v) var(--layout-gap-h);
}

:where(.responsive).pentaho-dialog .button-panel .pentaho-button {
  flex: 0 1 auto;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* endregion DIALOG RESPONSIVE - END */

/* region GWT DialogBox, PromptDialogBox RESPONSIVE */
:where(.responsive) .gwt-Label {
  width: auto !important;
}

:where(.responsive).pentaho-dialog.pentaho-gwt {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

:where(.responsive).pentaho-dialog.pentaho-gwt > * > table,
:where(.responsive).pentaho-dialog.pentaho-gwt > * > table > tbody,
:where(.responsive).pentaho-dialog.pentaho-gwt :is(
  .dialogTop,
  .dialogTopCenter,
  .dialogTopCenterInner,
  .dialogMiddle,
  .dialogMiddleCenter,
  .dialogContent, /* a.k.a. .dialogMiddleCenterInner */
  .dialogContent > table,
  .dialogContent > table > tbody,
  .dialogContent > table > tbody > tr,
  .dialogContent > table > tbody > tr:last-child > td, /* buttons row */
  .inner-button-wrapper) {
  display: contents;
  flex: inherit;
}

:where(.responsive).pentaho-dialog.pentaho-gwt :is(
  .dialogContent > table > colgroup,
  .dialogBottom) {
  display: none;
}

:where(.responsive).pentaho-dialog.pentaho-gwt .button-panel {
  width: unset !important;
}
/* endregion */

/* region XUL/GWT GenericDialog, GwtDialog, ... RESPONSIVE */
:where(.responsive).pentaho-dialog:where(.pentaho-xul-gwt) .dialog {
  display: contents;
  flex: inherit;
}

:where(.responsive).pentaho-dialog:where(.pentaho-xul-gwt) .buttonTable {
  flex: 1;
  min-width: auto;
  gap: var(--layout-gap-v) var(--layout-gap-h);
}

:where(.responsive).pentaho-dialog:where(.pentaho-xul-gwt) :where(td[align="left"]) .buttonTable {
  justify-content: start;
}

:where(.responsive).pentaho-dialog:where(.pentaho-xul-gwt) :where(td[align="center"]) .buttonTable {
  justify-content: center;
}

:where(.responsive).pentaho-dialog:where(.pentaho-xul-gwt) :where(td[align="right"]) .buttonTable {
  justify-content: end;
}
/* endregion */

/* region BootstrapJS Dialog Responsive */
.bootstrap :where(.responsive).modal.pentaho-dialog .body,
.bootstrap :where(.responsive).modal.pentaho-dialog .footer {
  display: flex;
  flex-direction: column;
}

.bootstrap :where(.responsive).modal.pentaho-dialog {
  padding: 0;
}

.bootstrap :where(.responsive).modal.pentaho-dialog .Caption .header-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* endregion */

/* region AbstractWizardDialog */

/* content row */
.pentaho-wizard-dialog .dialogContent > table > tbody > tr:first-child > td {
  display: contents;
  flex: inherit;
}

.pentaho-wizard-steps-list {
  /* Steps list is not used/supported in the responsive mode. */
  display: none !important;
}

.pentaho-wizard-deck-panel,
.pentaho-wizard-deck-panel > * {
  flex: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* endregion */

/* region Parameter UI */
:where(.responsive).parameter-ui {
  height: auto;
  padding: var(--focus-ring-padding) !important;
  box-sizing: border-box;
}
/* endregion */

/* region File Properties dialog */
.file-properties-dialog .pentaho-tab-deck-panel > div > * {
  height: auto !important;
}

.file-properties-dialog > div > table {
  width: 100% !important;
  height: auto !important;
}

.file-properties-dialog #filePropertiesGeneralTab .gwt-Label {
  word-break: break-all;
}
/* endregion */

/* region Select User or Role dialog */
.select-user-or-role-dialog .gwt-ListBox {
  width: 100% !important;
}
/* endregion */

/* region XUL / GWT - ChangePasswordByUserDialog, ChangePasswordDialog, UserDialog, RoleDialog */
:is(.pentaho-dialog-change-password, .pentaho-dialog-new-user, .pentaho-dialog-new-role) .dialog-content {
  /* Dialogs use empty rows for V-spacing. */
  --layout-gap-v: 0;
}

:is(.pentaho-dialog-change-password, .pentaho-dialog-new-user, .pentaho-dialog-new-role) .dialog-content input {
  width: unset !important;
}
/* endregion */

/* region Schedule Wizard Dialogs */

.schedule-label {
  margin: 0;
}

.schedule-timestamp-listbox {
  flex: none;
  margin-left: unset;
  margin-bottom: unset;
  min-width: 200px;
  width: unset;
}

.schedule-name-panel {
  flex-wrap: wrap;
  --flex-items: 1 1 0;
}

.schedule-caption-panel {
  margin-top: unset;
}

.schedule-dialog-button-panel {
  padding-right: 3px;
  padding-bottom: 2px;
  width: 100%;
}

.schedule-output-location-dialog,
.change-schedule-owner-dialog,
.new-schedule-dialog,
.schedule-recurrence-dialog,
.schedule-params-dialog,
.schedule-email-dialog {
  --dialog-max-height: 450px;
}

.schedule-input, .schedule-custom-list {
  width: auto;
}
.schedule-input {
  flex: auto;
}

.schedule-error {
  flex: auto;
  align-self: center;
}

button.pentaho-button:is(
  .schedule-button,
  .schedule-button:hover
) {
  flex: none;

  font-size: var(--typ-body-font-size);
  line-height: var(--typ-body-line-height);

  margin: 0;
  height: var(--input-outer-height);
  border-width: var(--input-border-width);
  border-radius: 4px;
  padding-top: 0;
  padding-bottom: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* region New Schedule Dialog */
:where(.new-schedule-dialog) .dialog-content > * {
  --flex-items: none;
  row-gap: 10px;
}
:where(.new-schedule-dialog) .gwt-CheckBox {
  /*display: block;*/
  margin-top: 0;
}
/* endregion New Schedule Dialog */

/* region Change Scheduler Owner Dialog */
:where(.change-schedule-owner-dialog) .dialog-content > * {
  --flex-items: none;
  row-gap: 30px;
}

:where(.change-schedule-owner-dialog) .custom-list:not(.list-mode) {
  min-height: var(--input-outer-height);
  height: auto;

  padding-top: var(--input-padding-v);
  padding-bottom: var(--input-padding-v);
}
/* endregion Change Scheduler Owner Dialog */

/* Output Location Dialog / Panel */
.schedule-dialog-location-panel {
  flex-wrap: wrap;
}

/* NOTE: --flex-items is not working for contained Flex Panels */
.schedule-output-location-dialog .dialog-content > table > tbody > tr > td > * {
  flex: none;
}

/* Parameters Dialog / Panel */
.schedule-params-wizard-panel {
  row-gap: 1em;
}

.schedule-params-wizard-panel .schedule-parameter-frame {

  flex: 1 0 auto;
  box-sizing: border-box;

  /* Updated by JS code with the frame's content width and height */
  --frame-content-width: initial;
  --frame-content-height: initial;

  /* Parameter ui html should use a body padding of the same + amount.
     This allows the focus outline to "appear" to overflow the iframe,
     while still aligning with the rest of the content of the dialog.
     (see rule for .responsive.parameter-ui)
   */
  margin: calc(-1 * var(--focus-ring-padding));
  border: 0;
  padding: 0;

  /* This will fallback to auto when --frame-content-height is not set */
  height: var(--frame-content-height, auto) !important;
}

/* endregion */

.glasspane {

  /* Make sure to update .modal-backdrop style in bootstrap-namespaced.css with the changes below */

  position: absolute;
  background-color: #000 !important; /*#809eab;*/

  /* IE8 css hack for opacity */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)" !important;
  filter: alpha(opacity = 60) !important;
  opacity: 0.6 !important;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 300;
  margin: 0px;
  padding: 0px;
  display: none;
}

.pentaho-tabWidget {
  display: inline-table;
  background: transparent;
  cursor: pointer;
  margin-left: 0px;
  padding: 6px 8px;
  border-top: solid 1px transparent;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
}

/* Due to relative positioning and use of z-index, focus-ring would not appear in Firefox.
   Placing it on the direct child instead solves it. */
.pentaho-tabWidget:focus-visible {
  outline: none;
}

.pentaho-tabWidget:focus-visible > * {
  outline: var(--focus-ring);
  outline-offset: 5px;
}

.pentaho-tabWidget .pentaho-closebutton {
  position: relative;
  top: 3px;
}

.pentaho-tabWidget .pentaho-tabWidgetLabel {
  margin: 0px;
  padding-bottom: 0px;
  font-size: 14px;
  line-height: 22px;
  color: #999;
  white-space: nowrap;
  font-family: opensansregular, Helvetica, Arial, Sans serif;
  padding: 0 8px;
}

.pentaho-tabWidget .pentaho-tabWidgetLabel:hover {
  color: #CC0000;
}

#sidepaneltabset .pentaho-tabWidgetLabel {
  padding: 0 4px;
}

.dialog-content .pentaho-tabWidget .pentaho-tabWidgetLabel {
  font-size: 14px;
}

.pentaho-tabWidget-selected {
  border-top: solid 1px #CCC;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 1px;
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 1px;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  background: #FFF;
}

#contentArea .pentaho-tabWidget,
#editContainer .pentaho-tabWidget {
  border-top: 4px solid transparent;
}

#contentArea .pentaho-tabWidget-selected,
#editContainer .pentaho-tabWidget-selected {
  border-top: solid 4px #CC0000;
}

.pentaho-tabWidget-selected .pentaho-tabWidgetLabel {
  margin: 0px;
  padding-bottom: 0px;
  white-space: nowrap;
  color: #414141;
}

.pentaho-tabBar .pentaho-tabWidget-selected .pentaho-tabWidgetLabel {
  margin: 0px;
  padding-bottom: 0px;
  white-space: nowrap;
  color: #CC0000;
}

#props-deck-1 .pentaho-tabWidget {
  padding: 4px 8px;
}

/* region - Replacing existing image border with CSS border for Tabs - Start */
.pentaho-tab-bar {
  position: relative;
  border-bottom: solid 1px #CCC;
}

.pentaho-tabWidget {
  position: relative;
  bottom: -1px;
}

.pentaho-tabWidget-selected {
  z-index: 1;
}
/* endregion - Replacing existing image border with CSS border for Tabs - End */

.xul-tabbox {
  --tab-bar-height-px: 35;
  --tab-bar-height: calc(1em * var(--tab-bar-height-px)/var(--typ-body-font-size-px));
}

:where(.xul-tabbox) .pentaho-tabBar {
  height: calc(1px * var(--tab-bar-height-px));

  background-image: url('images/bg_admin_tab_panel.png');
  background-repeat: repeat-x;
  background-position: top left;
}

:where(.responsive .xul-tabbox) .pentaho-tabBar {
  height: var(--tab-bar-height);
  background-size: contain;
}
:where(.responsive .xul-tabbox) .pentaho-tabBar .pentaho-tabWidget {
  height: var(--tab-bar-height) !important;
}
:where(.responsive .xul-tabbox .pentaho-tabBar) .gwt-TabBarFirst {
  display: none;
}

:where(.xul-tabbox) :is(#sidepanelinner, #editContainer) .pentaho-tabBar {
  --tab-bar-height-px: 38;

  background-position: bottom left;
}

:where(.xul-tabbox) #props-deck-1 .pentaho-tabBar {
  --tab-bar-height-px: 18;

  background-position: bottom left;
}

.pentaho-tabPanel {
  border-top: 0px solid #E8E9EA;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
  clear: both;
  background-color: #fff;
}

.pentaho-tab-deck-panel {
  border-top: 0px solid #E8E9EA;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
  height: 100%;
  background-color: #fff;
  position: relative;
}

/* Webkit browsers only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .pentaho-tab-deck-panel > div {
    height: auto !important;
  }

  #solutionNavigatorAndContentPanel .pentaho-tab-deck-panel > div {
    position: absolute;
    inset: 0;
  }
}

/* properties dialog panels */
#filePropertiesPermissionsTab,
#filePropertiesGeneralTab {
  padding: 8px;
}

.pentaho-tabWidget-close {
  margin-left: 4px;
}

/* ======================= Behins Scrollbar Styles ========================= */

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer {
  overflow: hidden;
  position: relative;
}

.jspPane {
  position: absolute;
}

.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ='#666666', endColorstr ='#666666', GradientType = 1);
  font-size: 0px;
}

.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ='#666666', endColorstr ='#666666', GradientType = 1);
  font-size: 0px;
}

/*.jspVerticalBar *,
.jspHorizontalBar * {
margin: 0;
padding: 0;
}
*/
.jspCap {
  display: none;
}

.jspHorizontalBar .jspCap {
  float: left;
}

.jspTrack {
  position: relative;
}

.jspDrag {
  background: #bbd;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}

.jspHorizontalBar .jspTrack {

  /* Safari/Chrome */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333), color-stop(0.50, #777), color-stop(1, #333));  /* Firefox */
  background: -moz-linear-gradient(top, #333, #777 50%, #333 100%);
  border-top: 1px solid #b5b5b5;
  border-bottom: 1px solid #b5b5b5;  /* Safari/Chrome */
  -webkit-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ='#777777', endColorstr ='#999999');
}

.jspVerticalBar .jspTrack {

  /* Safari/Chrome */
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #333), color-stop(0.50, #777), color-stop(1, #333));  /* Firefox */
  background: -moz-linear-gradient(left, #333, #777 50%, #333 100%);
  border-left: 1px solid #b5b5b5;
  border-right: 1px solid #b5b5b5;  /* Safari/Chrome */
  -webkit-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Firefox */
  -moz-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Standard Form */
  box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ='#7777777', endColorstr ='#9999999', GradientType = 1);
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}

.jspArrow {
  text-indent: -20000px;
  display: block;
  cursor: pointer;
}

.jspArrow.jspDisabled {
  cursor: default;
}

.jspVerticalBar .jspArrow {
  height: 16px;
}

.jspVerticalBar .jspArrowDown {

  /* Safari/Chrome */
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;  /* Firefox */
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  border: 1px solid #b5b5b5;  /* Safari/Chrome */
  -webkit-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Firefox */
  -moz-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Standard Form */
  box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;
  background: url("../images/scroll_bottom_arrow.png") no-repeat center center;  /* Safari/Chrome */
  background: url("../images/scroll_bottom_arrow.png") center center no-repeat, -webkit-gradient(linear, left top, right top, color-stop(0, #282828), color-stop(0.50, #353535), color-stop(1, #282828));  /* Firefox */
  background: url("../images/scroll_bottom_arrow.png") no-repeat scroll center center, -moz-linear-gradient(center top, #282828, #353535 50%, #282828 100%);
}

.jspVerticalBar .jspArrowUp {
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border: 1px solid #b5b5b5;  /* Safari/Chrome */
  -webkit-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Safari/Chrome */
  -moz-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Standard Form */
  box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;
  background: url("../images/scroll_top_arrow.png") no-repeat center center;  /* Safari/Chrome */
  background: url("../images/scroll_top_arrow.png") no-repeat center center, -webkit-gradient(linear, left top, right top, color-stop(0, #282828), color-stop(0.50, #353535), color-stop(1, #282828));  /* Firefox */
  background: url("../images/scroll_top_arrow.png") no-repeat center center, -moz-linear-gradient(top, #282828, #353535 50%, #282828 100%);
}

.jspHorizontalBar .jspArrowLeft {

  /* Safari/Chrome */
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;  /* Firefox */
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border: 1px solid #b5b5b5;  /* Safari/Chrome */
  -webkit-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Firefox */
  -moz-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Standard Form */
  box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;
  background: url("../images/scroll_left_arrow.png") no-repeat center center;  /* Safari/Chrome */
  background: url("../images/scroll_left_arrow.png") no-repeat center center, -webkit-gradient(linear, left top, left bottom, color-stop(0, #282828), color-stop(0.50, #353535), color-stop(1, #282828));  /* Firefox */
  background: url("../images/scroll_left_arrow.png") no-repeat center center, -moz-linear-gradient(left, #282828, #353535 50%, #282828 100%);
}

.jspHorizontalBar .jspArrowRight {

  /* Safari/Chrome */
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;  /* Firefox */
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;  /* Firefox */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid #b5b5b5;  /* Safari/Chrome */
  -webkit-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Firefox */
  -moz-box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;  /* Standard Form */
  box-shadow: black 0px 0px 1px, rgba(0, 0, 0, 0.699219) 0px 0px 1px inset;
  background: url("../images/scroll_right_arrow.png") no-repeat center center;
  background-repeat: no-repeat;  /* Safari/Chrome */
  background: url("../images/scroll_right_arrow.png") no-repeat center center, -webkit-gradient(linear, left top, left bottom, color-stop(0, #282828), color-stop(0.50, #353535), color-stop(1, #282828));  /* Firefox */
  background: url("../images/scroll_right_arrow.png") no-repeat center center, -moz-linear-gradient(left, #282828, #353535 50%, #282828 100%);
}

.jspHorizontalBar .jspArrow {
  width: 16px;
  float: left;
  height: 16px;
}

.jspVerticalBar .jspArrow:focus {
  outline: none;
}

.jspVerticalBar .jspDrag {
  width: 8px;
  border-radius: 4px;
  border: 1px solid black;  /* Safari/Chrome */
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(255, 255, 255, 1) inset;  /* Firefox */
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(255, 255, 255, 1) inset;  /* Standard Form */
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(255, 255, 255, 1) inset;  /* Safari/Chrome */
  background: url("../images/scroll_grabber.png") no-repeat center center, -webkit-gradient(linear, left top, right top, color-stop(0, #111), color-stop(0.50, #222), color-stop(1, #111));  /* Firefox */
  background: url("../images/scroll_grabber.png") no-repeat center center, -moz-linear-gradient(left, #111, #222 50%, #111 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ='#777777', endColorstr ='#5555555', GradientType = 1);
}

.jspHorizontalBar .jspDrag {
  height: 8px;
  border-radius: 4px;
  border: 1px solid black;  /* Safari/Chrome */
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(255, 255, 255, 1) inset;  /* Firefox */
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(255, 255, 255, 1) inset;  /* Standard Form */
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(255, 255, 255, 1) inset;  /* Firefox */
  background: url("../images/scroll_grabber_horz.png") no-repeat center center, -webkit-gradient(linear, left top, left bottom, color-stop(0, #111), color-stop(0.50, #222), color-stop(1, #111));  /* Safari/Chrome */
  background: url("../images/scroll_grabber_horz.png") no-repeat center center, -moz-linear-gradient(top, #111, #222 50%, #111 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ='#7777777', endColorstr ='#555555');
}

.jspHorizontalBar .jspTrack {
  padding-top: 2px;
}

.jspVerticalBar .jspTrack {
  padding-left: 2px;
}

.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
  margin: 0 -3px 0 0;
}

/* ======================= End Scrollbar Styles ========================= */

/* ======================= Toolbar Styles ========================= */

.toolbar,
table.toolbar {
  width: 100%;
  height: 100%;

  padding: var(--focus-ring-padding);
  vertical-align: middle;
  background-color: #fff;

  border-top: none;
  border-left: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCC;
}

.IE .toolbar,
.IE table.toolbar {
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCC;
}

.toolbar > * > * > * > .flex-row {
  flex: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.xul-editPanel {
  --edit-panel-title-height-px: 28;
  --edit-panel-title-height: calc(1em * var(--edit-panel-title-height-px)/var(--typ-body-font-size-px));
}
:where(.xul-editPanel) .xul-editPanel-title {
  display: flex;
  align-items: center;

  height: var(--edit-panel-title-height);
  padding: 0 4px;
  box-sizing: border-box;

  background-color: #F8F8F8;
  border-bottom: 1px solid #b5b5b5;
}

.xul-editPanel-title-label {
  color: #333;
}

.xul-editPanel {
  border: 1px solid #CCC;
}

.xul-editPanel .xul-editPanel-title,
.xul-editPanel-title {
  background-color: #FFF;
  border-bottom: 1px solid #CCC;
}

.xul-editPanel .xul-editPanel-title-label,
.xul-editPanel-title-label {
  color: #333;
}

.dialog-content .xul-editPanel,
.xul-editPanel {
  border: 1px solid #CCC;
  background-color: #fff;
  height: 468px;
}

.content-toolbar {
  height: 32px;
}

.content-toolbar-button {
  width: 28px;
}

.content-toolbar-separator {
  width: 20px;
}

.toolbar-group-label-disabled {
  color: #777;
}

.toolbar-group-label {
  color: #000;
}

.toolbar-button {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0);
  margin: 0px;
  width: 22px;
  height: 22px;
  -webkit-user-select: none;
}

.toolbar-button-focus-panel {
  margin-left: 5px;
  --focus-ring-offset: 0px;
}

.IE .toolbar-button {
  border: 1px solid transparent;
}

.toolbar-button.toolbar-button-hovering {
  border: 1px solid #CC0000;
  background: none;
  cursor: pointer;
  margin: 0px;
  width: 22px;
  height: 22px;
  -webkit-user-select: none;
}

.IE .toolbar-button.toolbar-button-hovering {
  background: none;
  border: 1px solid #CC0000;
}

.toolbar-toggle-button {
  border: 1px solid rgba(0, 0, 0, 0);
  margin: 0px;
  width: 22px;
  height: 22px;
  -webkit-user-select: none;
}

.IE .toolbar-toggle-button {
  border: 1px solid transparent;
}

.toolbar-toggle-button-down {
  border: 1px solid #CC0000;
  margin: 0px;
  width: 22px;
  height: 22px;
  -webkit-user-select: none;
}

.IE .toolbar-toggle-button-down {
  border: 1px solid #CC0000 !important;

  /* override the transparent value set in toolbar-toggle-button*/
}

.toolbar-toggle-button-down-hovering {
  border: 1px solid #CC0000;
  margin: 0px;
  cursor: pointer;
}

.IE .toolbar-toggle-button-down-hovering {
  border: 1px solid #CC0000 !important;
  background: none;
  margin: 0px;
  cursor: pointer;
}

.toolbar-toggle-button-hovering {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #CC0000;
  cursor: pointer;
  margin: 0px;
}

.IE .toolbar-toggle-button-hovering {
  background: none;
  border: 1px solid #E6EFF6;
  cursor: pointer;
  margin: 0px;
}

.toolbar-combo-button {
  margin: 1px;
  padding-right: 14px;
  background-position: right center;
  background-repeat: no-repeat;
  background-image: url("../images/comboArrow.png");
  background-color: transparent;
  width: 22px;
  height: 22px;
}

.toolbar-combo-button-hovering {
  background-color: #E8E8E8;
  border: 1px solid #AAA;
  cursor: pointer;
  margin: 0px;
  width: 22px;
  height: 22px;
}

.toolbar-button.toolbar-button-disabled {
  opacity: 0.4;
  background-color: transparent;
}

.toolbar-button-disabled-hovering {
}

.toolbar-combo-button-disabled {
  margin: 1px;
  padding-right: 14px;
  background-color: transparent;
  background-position: right center;
  background-repeat: no-repeat;
  background-image: url("../images/comboArrow.png");
}

.toolbar-combo-button-hovering {
  border: 1px solid #AAA;
  margin: 0px;
}

.pentaho-titled-toolbar .pentaho-titled-toolbar-label {
  color: #333;
  font-size: 13px;
  white-space: nowrap;
}

.pentaho-bottom-bar {
  background: #F8F8F8;
}

.pentaho-transparent {
  background-color: transparent;
}

.pentaho-gradient {
  background: #F8F8F8; /* Old browsers */
}

.pentaho-rounded-panel {
  padding: 4px 4px 4px 4px;
}

/* BEGIN IE FIXES Admin View
 BISERVER-8275: The Home page in the Admin Perspective is shortened
 if the Document Mode is Standards instead of Quirks mode.

 In other browsers it works cause probably their rendering in Almost-Standards mode.

 The present solution for IE/Standards mode
 establishes intermediate coordinate systems
 in the tables, using position:relative,
 so that div children of that table's cells,
 that need to assume the containing cell's height,
 can use absolute positioning relative to its direct table.
*/

/* Have no other way to refer to this table */

/* Setup 0,0 coordinates for absolute content inside the cells of the table */
body.IE>table {
  position: relative;
}

/* inside one of the tds of the referred table */
.IE td #pucContent {
  height: 100%;
}

/* Sometimes this div also has the class applicationShell */
.IE #pucContent>div {
  position: absolute;
  height: auto; /* reset applicationShell 100% setting, otherwise bottom and top don't work well */
  top: 0px;
  bottom: 13px; /* Unfortunately, have to hardcode the effect of pentaho-rounded-panel class */
  left: 0px;
  right: 0px;
}

.IE #pucContent>div>div {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

/* admin table */
.IE #adminContentPanel {
  position: relative; /* Start a new 0,0 coordinate system */
  height: 100%;
  width: 100%;
}

/* the div inside one of the table cells should take all available height */
.IE #adminContentPanel>tbody>tr>td>div {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

/* END IE FIXES Admin View */
.pentaho-shine {
  background-color: transparent;
}

.pentaho-toolbar-background {
  background-color: rgba(255, 255, 255, 0.2);
}

.pentaho-padding-sm {
  padding: 4px;
}

.pentaho-padding-lg {
  padding: 8px;
}

.pentaho-tooltip-background {
  background-color: #FFF;
  border: 1px solid #CCC;
  -webkit-box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.2);
}

.pentaho-disclosure-panel {
  width: 100%;
}

.pentaho-disclosure-panel .header td {
  text-shadow: 1px 2px 2px rgba(22, 24, 27, 0.5);
  color: white;
  font-size: 13px;
}

.pentaho-disclosure-panel-openicon {
  width: 16px;
  height: 16px;
  background: url('../images/disclosure_open.png') no-repeat scroll transparent;
}

.pentaho-disclosure-panel-closeicon {
  width: 16px;
  height: 16px;
  background: url('../images/disclosure_close.png') no-repeat scroll transparent;
}

.pentaho-disclosure-panel-open {
  width: 100%;
  padding: 6px 6px 0px 6px;
}

.pentaho-disclosure-panel-dropdown {
  padding: 0px 10px 0px 10px;
  overflow: hidden;
}

.pentaho-disclosure-panel-open .header {
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  background: black; /* Old browsers */
  -moz-box-shadow: 2px 2px 6px 1px #333333;
  -webkit-box-shadow: 2px 2px 6px 1px #333333;
  box-shadow: 2px 2px 6px 1px #333333;
  padding: 4px 4px 4px 4px;
}

.IE .pentaho-disclosure-panel-open .header {
  border: none;  /*background: url("images/bg_btn.png")*/
}

.pentaho-disclosure-panel-closed {
  width: 100%;
  padding: 6px 6px 0px 6px;
}

.pentaho-disclosure-panel-closed .header {
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  background: black; /* Old browsers */
  border: 1px solid rgba(255, 255, 255, 0.59375);
  padding: 4px 4px 4px 4px;
}

.IE .pentaho-disclosure-panel-closed .header {
  border: none;  /*background: url("images/bg_btn.png")*/
}

.contrast-color {

  /* color: white; */
}

.contrast-background {
}

.section-header-outer {
  padding: 1px;
}

.section-header-middle {
  padding: 1px;
}

.section-header-inner {
  vertical-align: middle;
  padding-left: 4px;
}

/* ======================= File Chooser Styles ========================= */
.pentaho-file-chooser-selection {
  background-color: rgba(204, 0, 0, 0.2);
}

/* ======================= Launcher Styles ========================= */
.pentaho-launcher-panel-shadowed {
  border: 1px solid black;
  border-radius: 4px;
  -moz-box-shadow: 1px 1px 5px 0px #333333, 0 0 1px 1px rgba(255, 255, 255, .6) inset;
  -webkit-box-shadow: 1px 1px 5px 0px #333333, 0 0 1px 1px rgba(255, 255, 255, .6) inset;
  box-shadow: 1px 1px 5px 0px #333333, 0 0 1px 1px rgba(255, 255, 255, .6) inset;
}

.IE .pentaho-launcher-panel-shadowed {

  /* background: url('../images/wt_transparent.png') repeat;*/
}

.pentaho-launcher-shine {
  background-color: transparent;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.15)));
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15) 100%) repeat scroll 0 0 transparent;
}

/* ======================= Login Styles ========================= */
.login-panel {
  height: 100%;
  width: 100%;
  font-size: 13px;
  text-shadow: rgba(255, 255, 255, 0.398438) 0px 1px 0px;
  padding: 5px;
}

.login-panel-label {
  font-size: 13px;
  text-shadow: rgba(255, 255, 255, 0.398438) 0px 1px 0px;
}

.pentaho-light-text {
  color: #888888;
}

.panel-content {
  background: transparent;
}

.pentaho-listbox-tb {
  border-top: 1px solid #9f9f9f;
  border-bottom: 1px solid #9f9f9f;
  background-color: white
}

.pentaho-listbox {
  border: 1px solid #CCC;
  background-color: white;
  overflow: auto;
}

.pentaho-listitem {
  background-color: #ffffff;
  color: #333;
  cursor: pointer;
}

.pentaho-listitem-selected {
  background-color: rgba(204, 0, 0, 0.2);
  cursor: default;
}

.pentaho-listitem-disabled {
  background-color: #ffffff;
  color: #999;
  cursor: default;
}

.pentaho-listitem-hover {
  background-color: #E0E0E0;
  color: #414141;
  cursor: pointer;
}

.pentaho-listitem-label {
  padding-left: 4px;
}

.pentaho-menuitem {
  background-color: #ffffff;
  padding: 2px;
  color: #000000;
}

.pentaho-menuitem-label {
}

.pentaho-menuitem.pentaho-menuitem-hover {
  background-color: #CCCCCC;
  color: #414141;
  padding: 2px;
  cursor: default;
}

.pentaho-menu-outer {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  padding: 2px;
}

.pentaho-menu-separator {
  border-bottom: 2px solid white;
  border-top: 2px solid white;
  height: 5px;
  padding: 0;
}

.pentaho-menu-separator-inner {
  border-top: 1px solid #000000;
}

.pentaho-checkmenuitem {
  width: 16px;
  height: 16px;
  background: url('../images/checkbox-empty.png') no-repeat center;
}

.pentaho-checkmenuitem.menuitem-checked {
  width: 16px;
  height: 16px;
  background: url('../images/checkbox.png') no-repeat center;
}

.pentaho-menuitem-disabled {
  color: #808080;
}

.pentaho-droppanel {
  background-color: #D4D6DB;
  border: 1px solid rgba(0, 0, 0, 0.592);
  margin: 0 10px;
}

.back-icon {
  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-image: url('images/back_22.png');
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
}

:is(
  #mqlFilterGroupbox #mqlFilterEditButton,
  #sqlFilterGroupbox #editQueryButton
) img:is(.image-button-pressed, .image-button-over, .image-button) {
  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-image: url('images/edit_22.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

:is(
  #mqlFilterGroupbox #mqlFilterEditButton,
  #sqlFilterGroupbox #editQueryButton
) img:is(.disabled-image-button-pressed, .disabled-image-button-over, .disabled-image-button) {
  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-image: url('images/edit_22_disabled.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: default;
}

.fieldList .fieldListTop .clearSearchField {
  background-image: url('images/remove.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  top: 0;
  right: 0;
}

/* region Pentaho Buttons */

/* region Pentaho Buttons default size */
.pentaho-addbutton, .pentaho-addcombobutton, .pentaho-closebutton-big,
.pentaho-datasourcebutton, .pentaho-deletebutton, .pentaho-editbutton,
.pentaho-exportbutton, .pentaho-newbutton-small, .pentaho-openbutton-small,
.pentaho-redobutton, .pentaho-saveasbutton-small, .pentaho-savebutton-small,
.pentaho-undobutton, .pentaho-optionsbutton {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.pentaho-addcombobutton {
  background-image: url('images/add_combo.png');
}
.pentaho-addcombobutton.pentaho-imagebutton-disabled {
  background-image: url('../images/add_combo_disabled.png');
}

.pentaho-addbutton {
  background-image: url('images/add.png');
}
.pentaho-addbutton.icon-zoomable {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);
}
.pentaho-addbutton.pentaho-imagebutton-disabled {
  background-image: url('images/add_disabled.png');
}

.pentaho-datasourcebutton {
  background-image: url('images/database.png');
}

.pentaho-closebutton-big {
  --icon-height: 20;
  --icon-width: 20;

  margin-top: 10px;
  margin-right: 10px;

  background-image: url('images/close_big.png');
}

.pentaho-deletebutton {
  background-image: url('images/remove.png');
  top: 0;
}
:is(
  .pentaho-deletebutton.clearSearchField,
  .pentaho-deletebutton
).pentaho-imagebutton-disabled {
  background-image: url('images/remove_disabled.png');
}

.pentaho-editbutton {
  background-image: url('images/edit_22.png');
}
.pentaho-editbutton.pentaho-imagebutton-disabled {
  background-image: url('images/edit_22_disabled.png');
}

.pentaho-exportbutton {
  background-image: url('images/file_export.png');
}
.pentaho-exportbutton.pentaho-imagebutton-disabled {
  background-image: url('images/export_disabled.png');
}

.pentaho-newbutton-small {
  background-image: url('images/new_22.png');
}

.pentaho-openbutton-small {
  background-image: url('images/open_22.png');
}

.pentaho-redobutton {
  background-image: url('images/redo.png');
}
.pentaho-redobutton:is(.disabled, .pentaho-imagebutton-disabled) {
  background-image: url('images/redo-disabled.png');
}

.pentaho-saveasbutton-small {
  background-image: url('images/saveas_22.png');
}

.pentaho-savebutton-small {
  background-image: url('images/save_22.png');
}

.pentaho-undobutton {
  background-image: url('images/undo.png');
}
.pentaho-undobutton:is(.disabled, .pentaho-imagebutton-disabled) {
  background-image: url('images/undo_disable.png');
}
/* endregion */

/* region Pentaho Buttons small size */
.pentaho-backcolorbutton, .pentaho-closebutton, .pentaho-contextmenubutton,
.pentaho-downbutton, .pentaho-filterbutton, .pentaho-forecolorbutton,
.pentaho-layoutbutton, .pentaho-pagebackbutton, .pentaho-pagenextbutton,
.pentaho-upbutton, .treenode-open, .treenode-closed {
  --icon-height: 16;
  --icon-width: 16;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.pentaho-backcolorbutton {
  background-image: url('../images/back_color.png');
}
.pentaho-backcolorbutton.pentaho-imagebutton-disabled {
  background-image: url('../images/back_color_disabled.png');
}

:is(
  .pentaho-closebutton,
  .pentaho-closebutton.pentaho-imagebutton-hover
) {
  background-image: url('images/closeTab_active.png');
}
.pentaho-closebutton.pentaho-imagebutton-disabled {
  background-image: url('images/closeTab_off.png');
}

.pentaho-contextmenubutton {
  --icon-height: 15;
  --icon-width: 15;

  background-image: url('../images/options_menu_arrow.png');
}

.pentaho-downbutton {
  background-image: url('images/16x16_down.png');
}
.pentaho-downbutton.pentaho-imagebutton-disabled {
  background-image: url('images/16x16_down_disabled.png');
}

.pentaho-filterbutton {
  background-image: url('../images/filter.png');
}
.pentaho-filterbutton.pentaho-imagebutton-disabled {
  background-image: url('../images/filter_disabled.png');
}

.pentaho-forecolorbutton {
  background-image: url('../images/font_color.png');
}
.pentaho-forecolorbutton.pentaho-imagebutton-disabled {
  background-image: url('../images/font_color_disabled.png');
}

.pentaho-layoutbutton {
  background-image: url('../images/field_layout.png');
}

.pentaho-optionsbutton {
  background-image: url('../images/options.png');
}
.pentaho-optionsbutton.pentaho-imagebutton-disabled {
  background-image: url('../images/options_disabled.png');
}

.pentaho-pagebackbutton {
  --icon-width: 18;
  --icon-height: 18;

  background-image: url('../images/page_back.png');
}
.pentaho-pagebackbutton.pentaho-imagebutton-hover {
  background-image: url('../images/page_back_over.png');
}
.pentaho-pagebackbutton.pentaho-imagebutton-disabled {
  background-image: url('../images/page_back_disabled.png');
}

.pentaho-pagenextbutton {
  --icon-width: 18;
  --icon-height: 18;

  background-image: url('../images/page_forward.png');
}
.pentaho-pagenextbutton.pentaho-imagebutton-hover {
  background-image: url('../images/page_forward_over.png');
}
.pentaho-pagenextbutton.pentaho-imagebutton-disabled {
  background-image: url('../images/page_forward_disabled.png');
}
.pentaho-upbutton {
  background-image: url('images/16x16-up.png');
}
.pentaho-upbutton.pentaho-imagebutton-disabled {
  background-image: url('images/16x16-up_disabled.png');
}
/* endregion */

.pentaho-imagebutton-disabled {
  cursor: default;
}
/* endregion */

.prevTemplateIconOn, .pentaho-left-lgbutton {
  --icon-height: 26;
  --icon-width: 33;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-image: url('images/lg_arrow_left_on.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prevTemplateIconOff, .pentaho-left-lgbutton.pentaho-imagebutton-disabled {
  background-image: url('images/lg_arrow_left_off.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: default;
}

.nextTemplateIconOn, .pentaho-right-lgbutton {
  --icon-height: 33;
  --icon-width: 26;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-image: url('images/lg_arrow_right_on.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.nextTemplateIconOff, .pentaho-right-lgbutton.pentaho-imagebutton-disabled {
  background-image: url('images/lg_arrow_right_off.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: default;
}

.trashcan,
.pentaho-trashbutton {
  --icon-height: 150;
  --icon-width: 128;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-image: url('images/trashcan.png');
  background-position: center;
  background-repeat: no-repeat;
}

.trashcan:hover,
.trashcan.dojoDndContainerOver,
.pentaho-trashbutton.pentaho-imagebutton-hover {
  background-image: url('images/trashcan_full.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.pentaho-toolbar-separator {
  --icon-height: 18;
  --icon-width: 1;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-image: url('../images/toolbar_separator.png');
  background-position: center;
  background-repeat: no-repeat;
}

.pentaho-table {
  background: black;
}

.pentaho-table-header-cell {
  padding: 8px;
  background: #1a1a1a; /* Old browsers */
  background: -moz-linear-gradient(top, #1a1a1a 0%, #333333 50%, #000000 51%, #000000 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1a1a1a), color-stop(50%, #333333), color-stop(51%, #000000), color-stop(100%, #000000)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #1a1a1a 0%, #333333 50%, #000000 51%, #000000 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #1a1a1a 0%, #333333 50%, #000000 51%, #000000 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #1a1a1a 0%, #333333 50%, #000000 51%, #000000 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ='#FF777777', endColorstr ='#FF000000');
  zoom: 1;
  background: linear-gradient(top, #1a1a1a 0%, #333333 50%, #000000 51%, #000000 100%); /* W3C */
}

.pentaho-table-header-cell .label {
  color: white;
}

.pentaho-table-cell {
  background-color: white;
  padding: 0px 10px 0px 10px;
}

.pentaho-list-box {
  border: 1px solid #CCC;
}

.categoryIndicator {
  cursor: pointer;
}

.treenode-branch {
  display: inline;
}

.treenode-open {
  background-image: url('images/arrow_open.png');
  background-position: 0px 1px;
  float: left;
}

.treenode-closed {
  background-image: url('images/arrow_closed.png');
  background-position: 0px 1px;
  float: left;
}

.treenode-leaf-label {
  margin-left: 16px;
  padding-left: 16px;
  height: 24px;
  line-height: 24px;
}

#fieldlistContainer #fieldlist > div.categoryNodeNotFirst {
  margin-top: 20px;
  margin-bottom: 3px;
}

#fieldlistContainer #fieldlist > div.categoryNodeFirst{
  margin-top: 0;
  margin-bottom: 3px;
}

.fieldlist-filtered-field {
  background-image: url('../images/filter_sm.png');
  background-repeat: no-repeat;
  background-position: 2px 6px;
}

.dragDropAvatar {
  padding: 4px;
  background-color: #F8F8F8;
  border: 1px solid #1973bc;
  border-radius: 4px;
}

.dragDropTargetArea.highlightTarget {
  background-color: #E6EFF6;
}

.dragDropTargetArea {
  background-color: #ffffff;
  border: 1px solid #464f57;
  padding: 2px;
}

.dragDropTargetAreaHint {
  color: #898b8f;
  font-size: 16px;
  text-align: center;
}

/* styles for splash/logo dialogs */
.splash-content {

  /* fallback color */
  background: #FFF;
  width: 460px !important;
}

.splashimage {
  padding-top: 25px;
}

.splashtitle {
  padding-top: 0px;
  color: #333333;
  font-family: opensanslight, Helvetica, Arial, Sans serif;
  font-size: 16px;
  vertical-align: top;
  margin-top: 25px;
  display: block;
}

.splashtext {
  color: #333;
  padding: 10px 0 0 0;
  vertical-align: top;
  line-height: 20px;
}

/* this style can be used to force padding on an element so the shadow of its child element can be seen */
.pentaho-shadow-padding {
  padding-right: 8px;
  padding-bottom: 8px;
}

.pentaho-dropdownbutton-outer {
  padding: 4px;
  background: #CC0000;
  cursor: pointer;
  font-size: 0px;
  zoom: 1;
  width: 26px;
  height: 23px;
}

.pentaho-dropdownbutton-outer.pentaho-disabled {
  padding: 4px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #AAA), color-stop(0.10, #888), color-stop(0.50, #8d8d8d), color-stop(0.55, #727272), color-stop(0.90, #747474));
  background: -moz-linear-gradient(#AAA, #BBB 10%, #8d8d8d 50%, #727272 55%, #747474 90%);
  border: 1px outset gray;
  font-size: 0px;
}

.pentaho-dropdownbutton-inner {
  background-image: url('./images/calendar-white.png');
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 21px;
  width: 25px;
  font-size: 0px;
}

.pentaho-dropdownbutton-inner.pentaho-disabled {
  background-image: url('../images/combo_drop_arrow.png');
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 8px;
  width: 10px;
  font-size: 0px;
}

.tundra .dijitSelect .dijitButtonContents {
  background: #fff;
}

.tundra .dijitArrowButtonInner {
  background-image: url("images/arrow_down_gray.svg");
  background-position: left center;
  background-repeat: no-repeat;
  width: 12px;
  height: 16px;
  margin: 0 0 0 4px;
}

#queryOptionsMenuButton .dijitArrowButtonInner {
  background: none;
}

#measure-properties-dialog .dijitArrowButtonInner {
  background-image: url('images/arrow_down_gray.svg');
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: 1px center;
}

.IE .dialog-content .dijitComboBox .dijitArrowButton {
  height: auto;
  background-position: center center;
}

.dialog-content .dijitComboBox .dijitArrowButton input[type='text'],
div.dijitDateTextBox.dijitComboBox .dijitArrowButton input[type='text'] {
  border: none;
  height: 33px !important;
  margin-right: 3px;
}

div.dijitDateTextBox.dijitComboBox {
  border-radius: 4px;
  margin-bottom: 15px;
}

.dijitSelect {

  /* Standard form */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;  /* Firefox */
  -moz-border-top-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;  /* Safari/Chrome */
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

.tundra .dijitSelect {
  border: 1px solid #CCC;
  border-radius: 4px;
  overflow: hidden;
  margin: var(--focus-ring-padding);
}

.tundra .dijitSelect .dijitArrowButton {
  background: #FFF;
  font-size: 12px;
  color: #000;
  border: none;
  cursor: pointer;
}

.tundra .dijitSelect .dijitButtonContents {
  border-right: 0 none;
}

.tundra .dijitDisabled .dijitArrowButtonInner {
  background-position: center center;
}

.pentaho-chart-icon-large {
  background: url("../images/chart.png") no-repeat;
  height: 48px;
  width: 48px;
}

.pentaho-settings-icon-large {
  background: url("../images/settings.png") no-repeat;
  height: 48px;
  width: 48px;
}

.pentaho-settings-complete-icon-large {
  background: url("../images/settings_done.png") no-repeat;
  height: 48px;
  width: 48px;
}

.pentaho-play-icon-large {
  background: url("../images/play.png") no-repeat;
  height: 48px;
  width: 48px;
}

.pentaho-play-complete-icon-large {
  background: url("../images/play_done.png") no-repeat;
  height: 48px;
  width: 48px;
}

/* FieldsetPane styles - start */
.pentaho-fieldset-pane {
}

.pentaho-fieldset-pane-header {
  border-bottom: 2px #BBB solid;
  overflow: visible;
  height: 12px;
  margin: 5px 0 10px 0;
}

.pentaho-fieldset-pane-header .pentaho-fieldset-pane-title {
  padding: 0 5px;
  background-color: #d4d6db;
  font-size: 18px;
}

/* pentaho fieldset pane styles - end */
.disabledpane {
  top: auto;
  left: auto;
  position: absolute;  /* bg color is the same as panel-content so it will blend in */
  background-color: #d4d6db;  /* IE8 css hack for opacity */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=65)";
  filter: alpha(opacity = 65);
  opacity: 0.65;
  height: 100%;
  width: 100%;
  z-index: 300;
  margin: 0px;
  padding: 0px;
  display: none;
  border-radius: 4px;
}

.tundra .dijitTabCloseButton {
  background: url("../images/close_sm_disabled.png") no-repeat;
  height: 16px;
  width: 16px;
}

.tundra .dijitTabCloseButtonHover {
  background: url("../images/close_sm.png") no-repeat;
  height: 16px;
  width: 16px;
}

.tundra .dijitTabInnerDiv {
  padding: 2px;
}

.pentaho-fieldgroup-major {
  font-size: 24px;
  color: #333;
  font-family: OpenSansLight, Helvetica, Arial, Sans serif;
  cursor: default;
}

.authText.authenticationMethodDescriptionLabel {
  margin-bottom: 10px;
}

.authenticationSelector .groupOption:first-of-type {
  margin-top: 10px;
}

.authMethod,
.pentaho-fieldgroup-minor {
  font-size: 16px;
  color: #414141;
  font-family: OpenSansLight, Helvetica, Arial, Sans serif;
}

.dialog-content .message {
  text-align: left;
}

.dialog-buttons {
  height: 30px;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 10px 0 10px 0;
}

.warning {
  background: url('images/warning-icon.png') no-repeat 30px center #FBEADC;
  padding: 30px;
  border-radius: 4px;
  border-color: #DDD;
  border-width: 1px;
  border-style: solid;
  width: 575px;
}

.warning .icon {
  width: 20px;
  height: 70px;
  float: left;
  padding-right: 8px;
}

.warning .warning-header {
  font-size: 1.25em;
  color: red;
}

/* added by Brett  */
#pucContent {
  top: 85px; /* Top must be the same as height in #puchHeader */
}

.tabpanel {
  border: 0px solid #000000;
}

#sidepaneltabs {
  width: 258px;
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;  /* background: url('images/bg_side_panel.png') repeat-y top right; */
}

#fieldlistContainer {
  border: 1px solid #CCC;
  border-left: 0 none;
  border-right: 0 none;
  padding: 10px 4px;
  width: 250px;
}

#datasourcelbl .label .contrast-color {
  color: #333;
}

.plabel {
  color: #333;
  padding: 0;
}

#bottompanel {
  border: 0;
  height: 40px;
  padding: 4px;
}

.pentahoPropertiesPanel {
  background-color: transparent;
}

.tundra .dijitTitlePaneContentOuter {
  background-color: transparent;
}

/* -- new spinner stuff -- */
.busy-indicator-container {
  display: block;
}

.busy-indicator-container-wrapper {
  display: table;
}

.spinner {
}

.spinner div > div {

  /* spin.js uses inline styles, so we have to override those with !important to acheive theme-ability*/
  background-color: #0560AB !important;
}

@-webkit-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-webkit-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-moz-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-ms-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-moz-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-webkit-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@-o-keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

@keyframes uil-rolling-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

}

.spinner {
  position: relative !important;
  -ms-animation: uil-rolling-anim 1s linear infinite;
  -moz-animation: uil-rolling-anim 1s linear infinite;
  -webkit-animation: uil-rolling-anim 1s linear infinite;
  -o-animation: uil-rolling-anim 1s linear infinite;
  animation: uil-rolling-anim 1s linear infinite;
}

.spinner:after {
  content: '';
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius: 40px 40px 0 0;
  border-color: #cc0000;
  border-style: solid;
  border-width: 3px;
  border-bottom-width: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.spinner:before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-color: #E0E0E0;
  border-style: solid;
  border-width: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.large-spinner {
  height: 40px !important;
  width: 40px !important;
  left: 0 !important;
  top: 0 !important;
}

.medium-spinner {
  height: 32px !important;
  width: 32px !important;
  left: 0 !important;
  top: 0 !important;
}

.spinner.medium-spinner:after {
  content: '';
  position: absolute;
  width: 32px;
  height: 16px;
  border-radius: 32px 32px 0 0;
  border-color: #005da6;
  border-style: solid;
  border-width: 2px;
  border-bottom-width: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.spinner.medium-spinner:before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-color: #E0E0E0;
  border-style: solid;
  border-width: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.small-spinner {
  height: 16px !important;
  width: 16px !important;
  left: 0 !important;
  top: 0 !important;
}

.spinner.small-spinner:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 8px;
  border-radius: 16px 16px 0 0;
  border-color: #005da6;
  border-style: solid;
  border-width: 2px;
  border-bottom-width: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.spinner.small-spinner:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border-color: #E0E0E0;
  border-style: solid;
  border-width: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.large-spinner > div,
.medium-spinner > div,
.small-spinner > div {
  visibility: hidden;
}

#getting-started .large-spinner {
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: auto;
  position: absolute !important;
}

.busy-indicator-spinner,
.pentaho-busy-indicator-spinner {
  display: table-cell;
  width: 48px;
  height: 48px;
  vertical-align: middle;
  padding: 20px;
}

.pentaho-busy-indicator-msg-contianer {
  display: table-cell;
  vertical-align: middle;
}

.waitPopup {
  position: absolute;
  width: 330px;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 20001;
  height: auto;
  border: 1px solid #CCC;
  background: #FFF;
}

.waitPopup_title {
  color: #333;
  font-size: 18px;
  padding-bottom: 3px;
  width: 262px;
}

.waitPopup_msg {
  color: #333;
  font-weight: normal;
  font-size: 14px;
  white-space: normal;
  width: 242px;
}

/* == == == == */
.icon-small {
  --icon-height: 16;
  --icon-width: 16;
}

.icon-medium {
  --icon-height: 32;
  --icon-width: 32;
}

.icon-large {
  --icon-height: 48;
  --icon-width: 48;
}

.icon-small, .icon-medium, .icon-large {
  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));
}

.icon-zoomable {
  height: calc(1em * var(--icon-height)/var(--typ-body-font-size-px)) !important;
  width: calc(1em * var(--icon-width)/var(--typ-body-font-size-px)) !important;

  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.refresh-browse-perspective, .icon-small.icon-refresh {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/refresh-small.png');
  cursor: pointer;
}

.refresh-browse-perspective:where(:not(.icon-zoomable)) {
  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));
}

.icon-small.icon-refresh.disabled {
  background: url('../images/refresh-small-disabled.png');
}

.icon-small.icon-run {
  --icon-height: 22;
  --icon-width: 22;

  background-image: url('images/start_button_ruby.png');
}

.icon-small.icon-run.disabled {
  background: url('images/start_button_ruby.png');
}

.icon-small.icon-open-folder {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/open-folder.png');
}

.icon-small.icon-open-folder.disabled {
  background: url('images/open-folder-disabled.png');
}

.icon-small.icon-update {
  background: url('../images/update.png');
}

.icon-small.icon-update.disabled {
  background: url('../images/updateDisabled.png');
}

.icon-small.icon-misc {
  background: url('../images/misc-small.png');
}

.icon-small.icon-misc.disabled {
  background: url('../images/misc-small-disabled.png');
}

.icon-small.icon-drop-valid {
  background: url('../images/drop_valid.png');
}

.icon-small.icon-drop-invalid {
  background: url('../images/drop_invalid.png');
}

.icon-small.icon-analysis {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/file_analysis.png');
  background-repeat: no-repeat;
}

.icon-small.icon-xaction {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/file_action.png');
  background-repeat: no-repeat;
}

.icon-small.icon-url {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/file_url.png');
  background-repeat: no-repeat;
}

.icon-small.icon-file {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/file.png');
  background-repeat: no-repeat;
}

.icon-small.icon-folder {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/folder_closed.png');
  background-repeat: no-repeat;
}

.fileChooser {
  --file-chooser-line-height: 26px;
}
.fileChooserCellLabel,
.fileChooserCell.fileChooserCell {
  padding: 0 5px;
  line-height: var(--file-chooser-line-height);
}

.fileChooserCell:hover:not(.pentaho-file-chooser-selection) {
  background-color: #E0E0E0;
}

.fileChooserCell img {
  display: block;
  margin: 2px 0;
}

.icon-small.icon-waqr-report {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/file_generic.png');
  background-repeat: no-repeat;
}

.icon-small.icon-analyzer {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/file_analysis.png');
  background-repeat: no-repeat;
}

.icon-small.icon-pir-report {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/prptiFile.png');
  background-repeat: no-repeat;
}

.icon-small.icon-prpt-report {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/prptFile.png');
  background-repeat: no-repeat;
}

.icon-small.icon-dashboard {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/file_dashboard.png');
  background-repeat: no-repeat;
}

.icon-small.icon-stop {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/stop_button_ruby.png');
  background-repeat: no-repeat;
}

.icon-small.icon-pause {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/pause.png');
}

.icon-small.icon-stop-scheduler {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/stop_scheduler.png');
}

.icon-small.icon-start-scheduler {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/start_scheduler.png');
}

.icon-small.icon-execute {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/run-now.png');
}

.icon-small.icon-filter-add {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/filter-add-small.png');
}

.icon-small.icon-filter-active {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('../images/filter-active-small.png');
}

.icon-small.icon-filter-remove {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url('images/filter-remove-small.png');
}

.icon-medium.icon-open {
  background: url('../images/open_32.png');
}

.icon-medium.icon-save {
  background: url('../images/save_32.png');
}

.icon-medium.icon-save.disabled {
  background: url('../images/save_32_disabled.png');
}

.icon-medium.icon-saveAs {
  background: url('../images/saveAs_32.png');
}

.icon-medium.icon-saveAs.disabled {
  background: url('../images/saveAs_32_disabled.png');
}

.icon-medium.icon-print {
  background: url('../images/print_32.png');
}

.icon-medium.icon-print.disabled {
  background: url('../images/print_32_disabled.png');
}

.icon-medium.icon-edit.disabled {
  background: url('../images/editContent_32.png');
}

.icon-medium.icon-edit.disabled {
  background: url('../images/editContent_32_disabled.png');
}

.fileChooser .icon-small {
  width: calc(1em * 22/var(--typ-body-font-size-px));
  height: auto;
  background-size: 100%;
}

/* added by brett to override anlyzer styles */
.dijitTitlePane {
  background-color: #F8F8F8;
}

.pentahoPropertiesPanel .dijitTitlePaneContentInner {
  background-color: #F8F8F8;
}

.tundra .dijitTitlePaneTextNode {
  font-size: 16px;
  font-family: OpenSansLight, Helvetica, Arial, Sans serif;
  padding: 0 0 0 4px;
}

.icon-small.icon-accum-add {
  --icon-height: 13;
  --icon-width: 14;

  background-image: url('images/accum_add.png');
}

.icon-small.icon-accum-add-all {
  --icon-height: 13;
  --icon-width: 14;

  background-image: url('images/accum_add_all.png');
}

.icon-small.icon-accum-remove {
  --icon-height: 13;
  --icon-width: 14;

  background-image: url('images/accum_remove.png');
}

.icon-small.icon-accum-remove-all {
  --icon-height: 13;
  --icon-width: 14;

  background-image: url('images/accum_remove_all.png');
}

.icon-tree-leaf {
  margin-left: 15px;
}

.icon-tree-node {
  --icon-height: 16;
  --icon-width: var(--icon-width-root);
}

.icon-tree-node:where(:not(.icon-zoomable)) {
  --icon-height: 14;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));
}

.icon-tree-node.icon-recycle-bin {
  --icon-height: 16;

  background-image: url('images/remove_16.png');
  background-repeat: no-repeat;
}

.icon-tree-node.icon-folder {
  background-image: url('images/folder_16.png');
  background-repeat: no-repeat;
}

.dijitFolderOpened,
.dijitIconFolderOpen,
.open > table .icon-tree-node.icon-folder {
  background-image: url('images/folder_16-open.png');
  background-repeat: no-repeat;
}

:is(
  .tree-item-collapsed,
  .leaf-widget.parent-widget
) > table > tbody > tr > td > img {
  background-image: url('images/arrow_closed.png') !important;
  background-repeat: no-repeat !important;
}

:is(
  .tree-item-expanded,
  .leaf-widget.parent-widget.open
) > table > tbody > tr > td > img {
  background-image: url('images/arrow_open.png') !important;
  background-repeat: no-repeat !important;
}

.sidePanelIconOpen {
  background-image: url('images/16x16_right.png');
}

.sidePanelIconClose {
  background-image: url('images/16x16_left.png');
}

.fileBrowserColumn .body div.folder.open > div.element > div.icon {
  background: url("images/folder_open.png") no-repeat;
}

.fileBrowserColumn .body div.folder.open.selected > div.element > div.icon,
.fileBrowserColumn .body div.folder.open.secondarySelected > div.element > div.icon {
  background: url("images/folder_open.png") no-repeat;
}

.fileBrowserColumn .body div.folder > div.element > div.icon,
.fileBrowserColumn .body div.folder.empty > div.element > div.icon,
.fileBrowserColumn .body div.folder.open.empty > div.element > div.icon {
  background: url("images/folder_closed.png") no-repeat;
}

.fileBrowserColumn .body div.folder > div.element:hover > div.icon,
.fileBrowserColumn .body div.folder.empty > div.element:hover > div.icon,
.fileBrowserColumn .body div.folder.open.empty > div.element:hover > div.icon {
  background: url("images/folder_closed.png") no-repeat;
}

.fileBrowserColumn .body div.folder.selected > div.element > div.icon,
.fileBrowserColumn .body div.folder.empty.selected > div.element > div.icon,
.fileBrowserColumn .body div.folder.open.empty.selected > div.element > div.icon,
.fileBrowserColumn .body div.folder.secondarySelected > div.element > div.icon,
.fileBrowserColumn .body div.folder.empty.secondarySelected > div.element > div.icon,
.fileBrowserColumn .body div.folder.open.empty.secondarySelected > div.element > div.icon {
  background: url("images/folder_closed.png") no-repeat;
}

.fileBrowserColumn .body div.trash.trash > div.element > div.icon,
.fileBrowserColumn .body div.trash.trash.empty > div.element > div.icon,
.fileBrowserColumn .body div.trash.trash.open.empty > div.element > div.icon {
  background: url("images/trash.png") no-repeat;
}

.fileBrowserColumn .body div.trash.trash.selected > div.element > div.icon,
.fileBrowserColumn .body div.trash.trash.empty.selected > div.element > div.icon,
.fileBrowserColumn .body div.trash.trash.open.empty.selected > div.element > div.icon {
  background: url("images/trash.png") no-repeat;
}

.fileBrowserColumn .body div.trash.trash > div.element:hover > div.icon,
.fileBrowserColumn .body div.trash.trash.empty > div.element:hover > div.icon,
.fileBrowserColumn .body div.trash.trash.open.empty > div.element:hover > div.icon {
  background: url("images/trash.png") no-repeat;
}

.fileBrowserColumn .body .file .icon {
  background-image: url("images/file_generic.png");
}

.fileBrowserColumn .body .file .icon.url {
  background-image: url("images/file_url.png");
}

.fileBrowserColumn .body .file .icon.xanalyzer {
  background-image: url("images/file_analysis.png");
}

.fileBrowserColumn .body .file .icon.xdash {
  background-image: url("images/file_dashboard.png");
}

.fileBrowserColumn .body .file .icon.ktr {
  background-image: url("images/kettle_transformation.png");
  background-position: calc(1em * 2/ var(--typ-body-font-size-px)) center;
  background-size: calc(1em * 31/ var(--typ-body-font-size-px)) calc(1em * 15/ var(--typ-body-font-size-px));
  width: calc(1em * 18/ var(--typ-body-font-size-px));
}

.fileBrowserColumn .body .file .icon.kjb {
  background-image: url("images/kettle_job.png");
  background-position: calc(1em * 2/ var(--typ-body-font-size-px)) center;
  background-size: calc(1em * 31/ var(--typ-body-font-size-px)) calc(1em * 15/ var(--typ-body-font-size-px));
  width: calc(1em * 18/ var(--typ-body-font-size-px));
}

.fileBrowserColumn .body .file .icon.xaction {
  background-image: url("images/file_action.png");
}

.fileBrowserColumn .body .file .icon.prpt {
  background-image: url("images/prptFile.png");
}

.fileBrowserColumn .body .file .icon.prpti {
  background-image: url("images/prptiFile.png");
}

.fileBrowserColumn .body .file .icon.trashFolder {
  background: url("images/folder_closed.png") no-repeat;
}

.fileBrowserColumn .body .file .icon.cda {
  background-image: url("images/cda_20.png");
}

.fileBrowserColumn .body .file .icon.wcdf {
  background-image: url("images/cde_20.png");
}

.fileBrowserColumn .body .file .icon.xcdf {
  background-image: url("images/cdf_20.png");
}

.fileBrowserColumn .body div.folder > div.element > div.expandCollapse {
  background-image: url("images/folders-arrows.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  height: 20px;
  width: 20px;
  margin: 0 5px;
}

.fileBrowserColumn .body div.folder > div.element:hover > div.expandCollapse {
  background-image: url("images/folders-arrows.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  height: 20px;
  width: 20px;
  margin: 0 5px;
}


.fileBrowserColumn .body div.folder.selected > div.element > div.expandCollapse,
.fileBrowserColumn .body div.folder.secondarySelected > div.element > div.expandCollapse {
  background-position: bottom right;
}

.fileBrowserColumn .body div.folder.open > div.element > div.expandCollapse {
  background-image: url("images/folders-arrows.png");
  background-repeat: no-repeat;
  background-position: top left;
  height: 20px;
  width: 20px;
}

.fileBrowserColumn .body div.folder.open > div.element:hover > div.expandCollapse {
  background-image: url("images/folders-arrows.png");
  background-repeat: no-repeat;
  background-position: top right;
  height: 20px;
  width: 20px;
}

#fileBrowserFolders.fileBrowserColumn .body div.folder.loading div.expandCollapse {
  background-image: url("images/indicator_ball.gif");
  background-size: 20px;
}

#fileBrowserFolders.fileBrowserColumn .body div.folder.error div.expandCollapse {
  background-image: url("images/warning-icon.png");
  background-size: 20px;
}

.fileBrowserColumn .body div.folder.open.selected > div.element > div.expandCollapse,
.fileBrowserColumn .body div.folder.open.secondarySelected > div.element > div.expandCollapse {
  background-position: top right;
}

.fileBrowserColumn .body div.folder.empty > div.element:hover > div.expandCollapse {
  background-image: none;
}

.file-xanalyzer {
  background: url("images/file_analysis_32.png") no-repeat;
}

.file-xdash {
  background: url("images/file_dashboard_32.png") no-repeat;
}

.file-xaction {
  background: url("images/file_action_32.png") no-repeat;
}

.file-ktr {
  background: url("images/kettle_transformation_32.png") no-repeat;
}

.file-prpt {
  background: url("images/prptFile_32.png") no-repeat;
}

.file-prpti {
  background: url("images/prptiFile_32.png") no-repeat;
}

/*!* region PIR Filter Dialog *!*/
.responsive.pentaho-common-dialog.filter-dialog .dijitDialogPaneContent {
  width: auto !important;
  height: auto !important;
  overflow: auto !important;
}

:where(.filter-dialog) .filterDialogDetailsContainer {
  min-height: 120px;
}

:where(.filter-dialog) .filterDialogMatchComparator {
  margin: 0 !important;
}

:where(.filter-dialog) .filterPicklist {
  display: grid;
  gap: var(--layout-gap-v) var(--layout-gap-h);
  grid-template-areas:
    "title-head"
    "user-entry"
    "selectable-lists-available"
    "list-actions"
    "title-combo"
    "dropdown"
    "selectable-lists-used";
}

:where(.filter-dialog) .filterDialogPicklistHeadingText {
  grid-area: title-head;
}

:where(.filter-dialog) .filterDialogPicklistCombinationTypeTitle {
  grid-area: title-combo;
}

:where(.filter-dialog) .filterDialogPicklistCombinationType {
  grid-area: dropdown;
}

:where(.filter-dialog) .filterDialogPicklistFindInput {
  grid-area: user-entry;
}

:where(.filter-dialog) .picklistAvailable {
  grid-area: selectable-lists-available;
}

:where(.filter-dialog) .picklistUsed {
  grid-area: selectable-lists-used;
}

:where(.filter-dialog) .selectableListActions {
  grid-area: list-actions;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}


:where(.filter-dialog) .filterDialogPicklistButton {
  place-self: start;
  transform: rotate(90deg);
  width: calc(1em * var(--icon-width)/var(--typ-body-font-size-px)) !important;
}

@media (min-width: 640px) {
  :where(.filter-dialog) .filterPicklist {
    grid-template-columns: 3fr auto 3fr;
    grid-template-areas:
    "title-head title-head title-combo"
    "user-entry user-entry dropdown"
    "selectable-lists-available list-actions selectable-lists-used";
  }

  :where(.filter-dialog) .filterDialogPicklistButton {
    transform: none;
    margin-top: 0;
  }

  :where(.filter-dialog) .filterDialogPicklistHeadingText {
    display: flex;
  }

  :where(.filter-dialog) .filterDialogPicklistCombinationTypeTitle {
    display: flex;
  }

  :where(.filter-dialog) .selectableListActions {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

:where(.filter-dialog) .filterDialogParameterContainer {
  margin-top: 10px;
  margin-bottom: 10px;
}

:where(.filter-dialog) .findButton {
  grid-area: user-entry;
}

:where(.filter-dialog.responsive) :is(
 table:where([role="presentation"]),
 table:where([role="presentation"]) > *,
 table:where([role="presentation"]) > * > *,
 table:where([role="presentation"]) > * > * > *
) {
  display: contents;
  flex: inherit;
}

/* endregion*/

/* added by brett to override PIR styles */
.styled >* #reportContent,
#reportContent {
  border: 1px solid rgb(224, 224, 224);
}

.pentaho-selection-dialog-outer {
  border: 1px solid #CCC;
  background: #F8F8F8;
  padding: 8px 8px 0px 8px;
}

.pentaho-selection-dialog-inner {
  background: transparent;
}

.fade {
  background: transparent;
}

/* added by brett to override dashbaord styles */

/* #E6EFF6; */

/* #8ac06e; */
.highlight-shadow {
  -moz-box-shadow: 0 0 0px 1px #CC0000;
  -webkit-box-shadow: 0 0 0px 1px #CC0000;
  box-shadow: 0 0 0px 1px #CC0000;
}

.panelContent {
  background-color: #fff;
  border: 0;
}

#tab-dashboard-settings-panel div.panelContent button {
  padding: 6px 14px;
  margin-top: -3px;
}

.edit-panel {
  border-top: 0px solid #969696;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 4px 4px 4px;
  overflow: hidden;
  background-color: #F8F8F8;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

#props-deck-1 > #propertiesPanel {
  background: transparent;
  padding: 4px;
  border: 0px solid #666;
}

.gwt-ScrollTable .headerTable td {
  color: #FFFFFF;
  border-right: 1px solid rgb(255, 255, 255);
  background: #999999;
}

.objectTree {
  border: 1px solid #CCC;
}

.objectTree h2 {
  color: #333;
}

/* region override browser styles */

/* Home and Browser Files perspective */
.main-container {
  margin: 0 auto;
  max-width: 1230px;
  width: auto;
}

/* region Browse Files perspective */
.browse-files-perspective body {
  height: 100vh;
}

.browse-files-perspective.browse-files-perspective :is(.main-container, .main-container > *) {
  position: unset;
  padding: 0;
  height: 100%;
}

#fileBrowser {
  display: grid;
  width: 100%;
  min-height: 100%;

  grid-template-areas: "folder file actions";
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: 1fr;
}

/* region .fileBrowserColumn elements  */
.fileBrowserColumn.fileBrowserColumn.fileBrowserColumn.fileBrowserColumn {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#fileBrowserFolders {
  grid-area: folder;
  width: 100%;
  min-height: 256px;
}

#fileBrowserFiles {
  grid-area: file;
  width: 100%;
  margin-left: 0;
  min-height: 256px;
}

#fileBrowserButtons {
  grid-area: actions;
  width: 250px;
  height: auto !important;
  margin-left: 0;
}
/* endregion .fileBrowserColumn elements  */

/* region .fileBrowserColumn's .header and .body  */
.fileBrowserColumn .header {
  flex: none;
  height: auto;
  border: 0;
  font-size: 16px;
  line-height: 22px;
  min-height: calc(1em * 22/16);
  color: #333333;
  padding: 0;
  margin-bottom: 10px;
  cursor: default;
  font-family: OpenSansLight, Helvetica, Arial, Sans serif;
  overflow: visible;
}

.fileBrowserColumn > .body {
  flex: auto;
  position: unset;
  flex-direction: column;
}

:is(.fileBrowserFiles, .fileBrowserFolders) > .body {
  border: 1px solid #CCC;
}

.fileBrowserFolders > .body {
  /* Place focus ring inside tree nodes */
  --focus-ring-offset: calc(-1 * var(--focus-ring-width));
}

.fileBrowserFiles > .body {
  padding: 0;
}

.fileBrowserFiles.fileBrowserFiles > .body {
  overflow-x: hidden;
}

@supports (-moz-appearance:none) {
  .fileBrowserFiles > .body {
    width: -moz-available !important;
  }
}

.fileBrowserButtons > .body {
  /* Ensure enough space for the focus-visible outline. */
  padding: var(--focus-ring-padding);
}
/* endregion .fileBrowserColumn's .header and .body  */

/* region .folder, .folders ... */
.fileBrowserColumn > .body > .folder {
  width: max-content;
  min-width: 100%;
}
.fileBrowserColumn .body .folder {
  margin-left: 30px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: none;
}
.fileBrowserColumn .body .folders {
  display: flex;
  flex-direction: column;
  flex: none;
}

.fileBrowserColumn .body .folder .element {
  padding: 8px 8px 8px 0;
  font-size: 14px;
  font-family: opensansregular, Helvetica, Arial, Sans serif;
  position: relative;
  display: flex;
  flex-direction: row;
}

.fileBrowserColumn .body .folder .element > * {
  flex: none;
}

#fileBrowserFolders .body .folder .element > .expandCollapse {
  width: calc(1em * 20/var(--typ-body-font-size-px));
  height: calc(1em * 20/var(--typ-body-font-size-px));
  background-size: calc(1em * 40/var(--typ-body-font-size-px)) calc(1em * 40/var(--typ-body-font-size-px));
}

.fileBrowserColumn .body .folder .element > .title {
  flex: 1 0 auto;
  height: unset;
}

.fileBrowserColumn .body .folder .element:hover {
  background-color: #E0E0E0;
}

.fileBrowserColumn .body .folder.selected > .element {
  background: rgba(204, 0, 0, 0.2);
}

.fileBrowserColumn .body .folder.secondarySelected > .element {
  background: rgba(204, 0, 0, 0.2);
}

#fileBrowserFolders .body .folder .icon {
  margin: 0 4px;
  width: calc(1em * 22/var(--typ-body-font-size-px));
  height: auto;
  background-size: contain;
}
/* endregion .folder, .folders ... */

/* region .file ... */
.fileBrowserFiles > .body > .file {
  width: calc(100% - 2 * 8px);
  padding: 8px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-family: opensansregular, Helvetica, Arial, Sans serif;
}

@supports (-moz-appearance:none) {
  /* FF would otherwise replace the whole text with an ellipsis... */
  .fileBrowserFiles > .body > .file {
    text-overflow: clip;
  }
}

.fileBrowserColumn .body .file:hover {
  background-color: #E0E0E0;
}

.fileBrowserColumn .body .file.selected {
  background-color: rgba(204, 0, 0, 0.2);
}
/* endregion .file ... */

/* region buttons */
.fileBrowserColumn .body .separator {
  margin: 10px 0;
  border-top: solid 1px #CCC;
}

.bootstrap #fileBrowserButtons.fileBrowserColumn .btn,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:link,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:visited,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:hover,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:active,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:focus {
  padding: 4px;
  background: none;
  color: #7C0B2B;
}

.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:hover,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:active,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:focus {
  color: #7C0B2B;
  text-decoration: underline;
}

.bootstrap #fileBrowserButtons.fileBrowserColumn .btn:focus-visible {
  box-shadow: 0 0 transparent;
}

.bootstrap #fileBrowserButtons.fileBrowserColumn .btn[disabled],
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn[disabled]:link,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn[disabled]:visited,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn[disabled]:hover,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn[disabled]:active,
.bootstrap #fileBrowserButtons.fileBrowserColumn .btn[disabled]:focus {
  color: #AAAAAA;
  text-decoration: none;
}
/* endregion buttons */

/* region breakpoint overrides */
@media (max-width: 880px) {
  #fileBrowser {
    grid-template-areas:
			"folder actions"
			"file actions";
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 1fr;
  }

  .fileBrowserButtons > .body {
    flex: 1 0 auto;
  }
}

@media (max-width: 550px) {
  #fileBrowser {
    grid-template-areas:
			"folder"
			"file"
			"actions";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
}
/* endregion breakpoint overrides */

/* endregion Browse Files perspective */

/* region FileChooserDialog */
.fileChooserFilesList > * {
  border-spacing: 0;
  border-collapse: collapse;
}

.fileChooserFilesList > tbody > tr > td {
  border: 1px solid #ffffff;
  border-right: 0 none;
  border-top: 0 none;
  padding: 0;
}

.fileChooserFilesList > tbody > tr:last-child > td {
  border-bottom: 0 none;
}

.fileChooserFilesList > tbody > tr > td:first-child {
  border-left: 0 none;
}

.fileChooserFilesList > tbody > tr:first-child > td {
  border: 1px solid #cccccc;
  border-right: 0 none;
  border-top: 0 none;
}

.fileChooserFilesList > tbody > tr:first-child {
  position: sticky;
  top: 0;
}

.fileChooserFilesList > tbody > tr:first-child > td:last-child {
  border-right: 1px solid #cccccc;
}

.fileChooserFilesList > tbody > tr:first-child > td:first-child {
  border-left: 0 none;
}

.fileChooserHeader {
  background-color: #666;
  border: 0 none;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
  line-height: var(--file-chooser-line-height);
  color: #FFF;
  cursor: default;
}

.fileChooser .fileChooserFilesListContainer {
  display: contents;
  flex: inherit;
}

.fileChooser .fileNameTextBox {
  width: auto !important;
  max-width: 100ch;
}

.fileChooser .navigationListBox {
  min-width: 0;
  flex: auto;
  white-space: break-spaces;
  word-break: break-all;
}

.fileChooser .fileChooser-scrollPanel {
  background-color: white;
  border: 1px solid #CCC;
  min-height: calc(4 * var(--file-chooser-line-height));
  height: calc(9 * var(--file-chooser-line-height));
}

.fileChooserFilesList {
  table-layout: fixed;
  border-spacing: 0;
}

/* FileName column header cell */
.fileChooserFilesList > colgroup > .fileNameColumn {
  width: 55%;
}
.fileChooserFilesList > tbody > tr:first-child > td:first-child {
  width: auto !important;
}

/* Type - File or Folder column */
.fileChooserFilesList > colgroup > .fileOrFolderColumn {
  width: 10ch;
}

.fileChooserHeader,
.fileChooserCellLabel,
.fileChooserCell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fileChooserCellFileName {
  width: 100%;
}

.fileChooserCellFileName:focus-visible {
  --focus-ring-offset: -2px;
}

/* file icon td */
.fileChooserCellFileName > tbody > tr > td:first-child {
  flex: none;
}

/* file name td */
.fileChooserCellFileName,
.fileChooserCellFileName > tbody,
.fileChooserCellFileName > tbody > tr,
.fileChooserCellFileName > tbody > tr > td:last-child {
  flex: auto;
  min-width: 0;
}

/* file name div */
.fileChooserCellFileName > tbody > tr > td:last-child > * {
  flex: auto;
}

@media all and (max-width: 600px) {
  .fileChooserFilesList > colgroup > .fileOrFolderColumn,
  .fileChooserFilesList > tbody > tr > td:nth-child(2) {
    display: none;
  }
}

@media all and (max-width: 400px) {
  .fileChooserFilesList > colgroup > .fileDateModifiedColumn,
  .fileChooserFilesList > tbody > tr > td:nth-child(3) {
    display: none;
  }
}
/* endregion FileChooserDialog */

/* endregion override browser styles */

#reportPageOutline {
  -webkit-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, .3);
  box-shadow: 0px 1px 6px 1px rgba(58, 58, 58, .1);
  padding: 0;
  margin-top: 4px;
  border: 0;
}

.favorite-on {
  background: url("images/favorite-on.png");
  height: 32px;
  width: 32px;
}

.favorite-off {
  background: url("images/favorite-off.png");
  height: 32px;
  width: 32px;
}

.admin-perspective .pentaho-tab-deck-panel {
  background-color: #FFF;
  border-top: 0px solid #E8E9EA;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
}

.admin-perspective .pentaho-tab-bar {
  background-image: none;
  height: 38px;
}

.admin-perspective .pentaho-tab-panel {
  background: url('images/bg_admin_tab_panel.png') repeat-x 0 3px;
  height: 39px;
}

.admin-perspective .pentaho-tabWidget {
  border-top: solid 4px transparent;
}

.admin-perspective .pentaho-tabWidget-selected {
  border-top: solid 4px #CC0000;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 1px;
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 1px;
  border-top-right-radius: 1px;
  border-top-left-radius: 1px;
  background: #FFF;
}

button.adminButton {
  background: url("images/auth.png")
}

.dijitFolderClosed,
.dijitIconFolderClosed {
  background-image: url("images/folder_16.png") !important;
}

.dijitFolderOpen,
.dijitIconFolderOpen {
  background-image: url("images/folder_16.png") !important;
}

/* added for Analyzer fix */
#fieldListWrapperContentPane,
#layoutPanelWrapper {
  background-color: #fff;
}

#reportBtns {
  background-color: #F8F8F8;
  height: 30px;
}

#reportContainer {
  border: solid 0px #CCC;
  padding: 0;
}

.reportMain {
  border: 0px solid rgb(224, 224, 224);
}

.pc_pageTotal,
.dijitToolbar .pc_pageTotal {
  padding: 4px 0px 0px 2px;
}
/*Overrides Analyzer styles for filter panels*/
.reportArea #selectionFilterPanel {
  margin-top: 2px;
  padding: 1px 3px 13px 3px;
  background-color: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  opacity: 1;
}

/* added by brett to for PIR  */
#formattabpanelinner .tundra .dijitToolbar {
  background-color: #fff;
}

.tundra .dijitToolbar,
.tundra .dijitToolbar#toolbar {
  background-color: #F8F8F8;
  height: 30px;
}

.pentaho-table {
  border-spacing: 0;
  background-color: #FAFAFA;
}

.pentaho-table th {
  font-size: 12px;
  border-spacing: 0;
  padding: 11px 8px 12px 8px;
  font-weight: normal;
  background-color: #cc0000;
  color: #FFF;
  border: 1px solid #cccccc;
  border-right: 0 none;
}

.pentaho-table th:last-child {
  border-right: 1px solid #99BEDB;
}

.schedulesPanel .gwt-ScrollTable .dataTable td {
  padding: 8px 10px 10px 10px;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
  border: 1px solid #e0e0e0;
  border-right: 0 none;
  border-top: 0 none;
}

.schedulesPanel .gwt-ScrollTable .dataTable td:last-child {
  border-right: 1px solid #e0e0e0;
}

.schedulesPanel .gwt-ScrollTable .headerTable td {
  padding: 8px 10px 10px 10px;
}

.schedulesPanel .cellTableCell {
  cursor: pointer;
}

.schedulesPanel .cellTableCell.cellTableSelectedRowCell {
  cursor: default;
}

.schedulesPanel .cellTableCell.cellTableHoveredRowCell:not(.cellTableSelectedRowCell) {
  background: #E0E0E0;
  color: #666666;
}

.schedulesPanel #blockout-table,
.schedulesPanel .gwt-ScrollTable .headerTable,
.schedulerPerspective-wrapper table {
  width: 100% !important;
}

.schedulesPanel .cellTableCell div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.gwt-ScrollTable .dataTable td {
  padding: 4px 10px 4px 10px;
}

.IE11 .gwt-ScrollTable .headerTable {
  padding-right: 17px!important;
}

.gwt-ScrollTable .headerTable {
  background: #CCCCCC;
}

.gwt-ScrollTable table.headerTable *,
.gwt-ScrollTable .dataWrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#selectedColumnTree .gwt-ScrollTable .dataWrapper table,
#conditionsTree .gwt-ScrollTable .dataWrapper table,
#orderTable .gwt-ScrollTable .dataWrapper table {
  width: 100% !important;
}

.gwt-ScrollTable .dataWrapper .dataTable td {
  border-right: 0 none;
}

.gwt-ScrollTable .dataWrapper .dataTable td:last-child {
  border-right: 1px solid #e0e0e0;
}

.gwt-ScrollTable .dataWrapper .dataTable .custom-list tr:hover {
  background: #FFF !important;
}

.gwt-ScrollTable .dataWrapper input[type='text'].xul-textbox {
  padding: 2px 10px;
}

.gwt-ScrollTable .dataWrapper {
  background: #f8f8f8;
}

.gwt-ScrollTable .dataWrapper:focus-visible {
  outline-offset: -2px;
}

.gwt-ScrollTable .headerTable.headerTable td {
  padding-top: 2px;
  padding-bottom: 2px;
}

input#limit.xul-textbox {
  padding-top: 2px;
  padding-bottom: 2px;
}

.gwt-ScrollTable {
  border: 0 none;
  overflow: hidden;
}

.gwt-ScrollTable .headerWrapper {
  background: #d2d2d2 scroll left bottom;
  padding-right: 0px;
}

.gwt-ScrollTable .footerWrapper {
  background: #858585;
  border-top: 1px solid #d7d7d7;
}

.gwt-ScrollTable .headerTable td {
  font-size: 12px;
  border-spacing: 0;
  padding: 12px 10px;
  font-weight: normal;
  background-color: #666666;
  color: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-right: 0 none;
}

.gwt-ScrollTable .headerTable td:focus-visible {
  outline-offset: -2px;
}

#contentLinkingAssignmentTable .gwt-ScrollTable .headerTable td,
#propertiesPanelParameterAssignmentTable .gwt-ScrollTable .headerTable td {
  padding-left: 0px;
  padding-right: 0px;
  height: 20px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 22px;
}

td.tab-spacer-wrapper {
  display: none;
}

#contentLinkingAssignmentTable .gwt-ScrollTable .dataTable>tbody>tr>td,
#propertiesPanelParameterAssignmentTable .gwt-ScrollTable .dataTable>tbody>tr>td {
  padding-left: 0px;
  padding-right: 0px;
}

.gwt-ScrollTable .headerTable tr > td:last-of-type {
  border-right: 1px solid #99BEDB;
}

.gwt-ScrollTable .headerTable-disabled td {
  font-weight: normal;
  color: #000000;
  border-right: 0px;
}

.gwt-ScrollTable .dataTable tr {
  background: white;
}

.gwt-ScrollTable .dataTable-disabled tr {
  background: white;
}

.gwt-ScrollTable .dataTable tr:focus-visible {
  --focus-ring-offset: -2px;
}

.gwt-ScrollTable .dataTable td {
  border: 1px solid #e0e0e0;
}

.gwt-ScrollTable .dataTable tr.hovering {
  background: #CCCCCC;
  -moz-transition: all 600ms;
  -webkit-transition: all 600ms;
}

.gwt-ScrollTable .dataTable-disabled tr.hovering {
  background: #CCCCCC;
  -moz-transition: all 600ms;
  -webkit-transition: all 600ms;
}

.gwt-ScrollTable .dataTable td.hovering {
  background: #CCCCCC;
  -moz-transition: all 600ms;
  -webkit-transition: all 600ms;
}

.gwt-ScrollTable .dataTable tr.selected,
.gwt-ScrollTable .dataTable tr.selected:hover {
  background: rgba(204, 0, 0, 0.2) !important;
  cursor: default;
}

.gwt-ScrollTable .dataTable tr:hover {
  background: #E0E0E0;
  color: #414141;
  cursor: pointer;
}

.gwt-ScrollTable .pagingOptions {
  background: #e8e8e8 none repeat scroll 0% 0%;
  border-right: 1px solid #848484;
  border-top: 1px solid #848484;
}

.gwt-ScrollTable .pagingOptions .errorLabel {
  color: red;
}

/* region GWT ScrollTable Responsive */
:where(.responsive) .gwt-ScrollTable :is(.headerWrapper .headerTable, .dataWrapper .dataTable) {
  width: 0 !important;
}
/* endregion GWT ScrollTable Responsive */

.gwt-CellEditor {
  background: white none repeat scroll 0% 0%;
  border: 3px solid #d7d7d7;
}

.gwt-Tree .gwt-TreeItem-selected {
  background-color: rgba(204, 0, 0, 0.2);
  -moz-transition: all 600ms;
  -webkit-transition: all 600ms;
}

:where(.responsive) .tree-item-custom-widget:where(.flex-row) {
  align-items: center;
}

.tree-item-custom-widget-selected, .tree-item-custom-widget-selected:hover {
  background-color: rgba(204,0,0,0.2) !important;
  -moz-transition: all 600ms;
  -webkit-transition: all 600ms;
}

.tree-item-custom-widget:hover:not(.tree-item-custom-widget-selected) {
  background-color: #E0E0E0;
}

.tree-item-custom-widget-drop-hover {
  border: 1px solid #848484;
  background-color: #CCCCCC;
  -moz-transition: all 600ms;
  -webkit-transition: all 600ms;
}

.tree-drop-indicator {
  height: 1px;
  background-color: #1973cd;
  margin-top: 1px;
  padding-right: 6px;
}

.tree-drop-indicator-symbol {
  background-image: url("images/dropIndicator.png");
  padding-left: 12px;
  padding-top: 4px;
}

/* dojo grid styles ------------------------- */
.soria .dojoxGrid {
  background-color: transparent;
  font-size: 14px;
}

/* header */
.soria .dojoxGridHeader {
  background-color: transparent;
}

.soria .dojoxGridHeader .dojoxGridCell {
  font-size: 12px;
  border-spacing: 0;
  padding: 8px 10px 10px 10px;
  font-weight: normal;
  background: #cc0000;
  color: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
}

.soria .dojoxGridHeader .dojoxGridCell:last-child {
  border-right: 1px solid #99BEDB;
}

/* rows */
.soria .dojoxGridRow {
  border: none;
  background-color: white;
}

.soria .dojoxGridRowOver .dojoxGridCell {
  background-color: #E0E0E0;
  cursor: pointer;
}

.soria .dojoxGridRowSelected {
  background-color: rgba(204, 0, 0, 0.2) !important;
}

/* cells */
.soria .dojoxGridCell {
  padding: 8px 10px;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
  border: 1px solid #e0e0e0;
  border-right: 1px solid transparent;
  border-top: 0 none;
}

.soria .dojoxGridCell:last-child {
  border-right: 1px solid #e0e0e0;
}

#licensesGrid .dojoxGridView .dojoxGridCell:focus-visible {
  outline-offset : -3px;
}

/* region Pentaho GWT FocusPanel */

/* Prevent overflow on responsive dialogs.
   Visually hidden input created by FocusImplStandard to capture access keys on FocusPanel. */
.pentaho-gwt-FocusPanel > input {
  outline: 0;
  padding: 0;
  border: 0;
  margin: 0;
  left: 0;
  top: 0;
}
/* endregion*/

/* region Pentaho GWT CustomListBox control */
:is(.custom-list, .custom-list-disabled) {
  --custom-list-boder-radius: 4px;
}

.custom-list {
  border: 1px solid var(--color-atmo4);
}

:is(.custom-list, .custom-list-disabled),
:is(.custom-list, .custom-list-disabled) .pentaho-gwt-FocusPanel {
  border-radius: var(--custom-list-boder-radius);
}

:where(.responsive) :is(.custom-list, .custom-list-disabled) .pentaho-gwt-FocusPanel {
  width: auto !important;
}

:where(.responsive) :is(.custom-list.list-mode, .custom-list-disabled.list-mode) .pentaho-gwt-FocusPanel {
  height: auto !important;
  min-height: 0;
  min-width: 0;
}

:where(.responsive) :is(.custom-list.list-mode, .custom-list-disabled.list-mode) .pentaho-gwt-ScrollFlexPanel {
  height: 0 !important;
}

/* .custom-list-drop-grid */
:where(.responsive) :is(.custom-list, .custom-list-disabled) .custom-list-drop-grid {
  width: auto !important;
  /* H-space between label and combo-arrow */
  --layout-gap-h: 1px;
  /* V-align center */
  align-items: center;
}

/* .custom-list-item */
.custom-list-item .gwt-Label.gwt-Label {
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:where(.responsive) .custom-list-list-panel {
  row-gap: 2px;
}

:where(.responsive) :is(.custom-list-list-panel, .custom-list-list-panel .custom-list-item) {
  flex: none;
}

:where(.responsive) .custom-list-item .flex-row {
  width: 100% !important;
}

:where(.responsive) :is(.custom-list, .custom-list-disabled) .custom-list-item .gwt-Label {
  white-space: break-spaces;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.responsive) :is(.custom-list.list-mode, .custom-list-disabled.list-mode) .custom-list-item .gwt-Label {
  width: 100% !important;
  white-space: nowrap;
}

/* Setting up the min-height for the 3.5 custom list items to show by default
   5.25em * font-size of 14px / ( measured-line-height of 19px - row-gap of 2px ) ~= 3.5 items */
:where(.responsive) :is(.custom-list.list-mode, .custom-list-disabled.list-mode) {
  min-height: 5.25em;
}

:where(.responsive) :is(.custom-list, .custom-list-disabled) .custom-list-drop-grid .custom-list-item .gwt-Label {
  word-break: break-word;
  white-space: break-spaces;
}

#datatypeMenuList .custom-list-item {
  background-color: transparent;
}

/* .combo-arrow */
.combo-arrow {
  cursor: pointer;
}

:is(.combo-arrow, .combo-arrow-disabled) {
  padding: 4px;
  background: none;
  border: 0 none;
  font-size: 0;
}

:where(.responsive) :is(.combo-arrow, .combo-arrow-disabled) {
  padding: calc(1em * 4/var(--typ-body-font-size-px));
  font-size: inherit;
  flex: none;
  width: auto !important;
}

/* .combo-arrow div */
.combo-arrow div {
  background-image: url('images/arrow_down.png');
  background-position: right center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 8px;
  width: 12px;
  font-size: 0;
}

.combo-arrow-disabled div {
  background-image: url('images/arrow_down_disabled.png');
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 8px;
  width: 10px;
  font-size: 0;
}

:where(.responsive) :is(.combo-arrow, .combo-arrow-disabled) div {
  height: calc(1em * 8/var(--typ-body-font-size-px));
  width: calc(1em * 12/var(--typ-body-font-size-px));
  font-size: inherit;
}

/* .drop-popup */
.drop-popup {
  border: 1px solid var(--color-atmo4);
  margin-top: -2px;
}
/* endregion*/

/* region Search Text Box */
.gwt-search-text-box {
  --icon-right-pos: var(--focus-ring-padding);
  --input-icon-padding: calc(
          var(--icon-right-pos) +
          ( 1em * var(--icon-width) / var(--typ-body-font-size-px) )
  );

  padding: var(--focus-ring-padding);
}
/* endregion Search Text Box */

#controller_panel {
  border: 0;
}

/* report tab bg change  */
.dj_contentbox .pentaho-page-background {
  background: transparent;
  background-color: #FFF;
}

/* report viewer  */
.styled >* #reportControlPanel,
#reportControlPanel {
  max-height: 370px;
  margin: 0px;
  background-color: #FFFFFF;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #CCC;
  border-left: 0px solid #FFF;
  border-right: 0px solid #FFF;
  width: 100%;
}

div.prompt-panel .pentaho-toggle-button-container {
  margin: 2px 0;
}

.nonMobile.styled #reportControlPanel {
  margin: 0px 0px 0px 0px;
}

div.prompt-panel .pentaho-toggle-button-container > DIV {
  height: 30px;
  padding: 3px;
  display: inline-flex;
}

.wrapper_license_message {
  padding: 20px;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.license_message_content {
  width: 300px;
  border: 1px solid #DDD;
  border-radius: 4px;
  margin: 0 auto;
  padding: 20px;  /*-webkit-box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.3);
  box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.3);*/
  background: url('images/warning-icon.png') no-repeat 15px center #FBEADC;
}

.invalidLicense {
  padding: 10px 0;
}

.license_message_title {
  font-size: 16px;
  color: red;
  padding: 0 0 10px 40px;
}

.license_message_text {
  font-size: 14px;
  color: #000;
  padding: 0 0 0 40px;
  margin: 0;
}

#file-input-form-container {
  height: 20px;
  margin: 0;
  padding: 0 0 4px 0;
  display: flex;
  justify-content: end;
}

/* Data Source Wizard styles */
#addFileButton {
  max-width: 10ch;
  font-size: 12px;
  padding: 4px 10px;
}

.IE #selectAll,
.IE #tempPreviewButton,
.IE #preview,
#selectAll,
#tempPreviewButton,
#preview{
  padding: 4px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #ffffff;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); /* IE6-9 */
  color: #7C0B2B;
  border: none;
}

.IE #selectAll:hover, .IE #selectAll:active,
.IE #tempPreviewButton:hover, .IE #tempPreviewButton:active,
.IE #preview:hover, .IE #preview:active,
#selectAll:hover, #selectAll:active,
#tempPreviewButton:hover, #tempPreviewButton:active,
#preview:hover, #preview:active {
  color: #7C0B2B;
}

.IE #createJoinButton,
#createJoinButton {
  padding: 0 0 2px 0px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #FFFFFF;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); /* IE6-9 */
  color: #7C0B2B;
  border: none;
}

.IE #deleteJoinButton,
#deleteJoinButton {
  padding: 0 0 2px 0px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background: #FFFFFF;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); /* IE6-9 */
  color: #7C0B2B;
  border: none;
}

#selectAll:hover,
#tempPreviewButton:hover,
#preview:hover,
#createJoinButton:hover,
#deleteJoinButton:hover {
  text-decoration: underline;
}

#main_box {
  column-gap: var(--dialog-padding);
}

:is(#datatypeMenuList, #encodingTypeMenuList) {
  max-width: 25ch;
}

#csvDeckPanel .custom-list-textbox,
#datasourceName,
#uploadedFile,
.dataTable .gwt-HTML {
  font-family: opensansregular, Helvetica, Arial, Sans serif;
  font-size: 14px;
}

#datasourceName {
  padding: 0 10px;
  line-height: 22px;
  width: auto !important;
  max-width: 25ch;
}

:is(#datasourceDialogDeck, #csvDeckPanel) {
  height: auto !important;
}

#csvDescriptionLabel {
  white-space: normal !important;
  height: auto !important;
}

#delimiterRadioGroup .gwt-grid {
  max-width: 400px;
}

@media (max-width: 560px) {
  #delimiterRadioGroup .gwt-grid {
    grid-template-columns: 1fr;
  }

  #delimiterRadioGroup .gwt-grid > * > * > * > * {
    grid-row: auto;
    grid-column: auto;
  }
}

#uploadedFile.xul-textbox {
  height: 28px !important;
  margin-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  max-width: 290px;
  min-width: 10ch;
}

#csvTextPreview {
  --min-height: calc(5 * var(--typ-body-line-height));
}

#queryDeckPanel .xul-label {
  line-height: 28px;
  margin-right: 3px;
}

#query {
  max-height: 27em;
}

#connectionToolbar {
  align-items: center;
}

/* flex-column-sm breakpoint */
@media (max-width: 640px) {
  :where(.flex-row) .picklistPanel {
    transform: rotate(90deg);
  }
}

#connectionLabel {
  white-space: normal !important;
  line-height: 1.6em !important;
}

:is(#selectionButtonPanelSpacer,#factTableSpacer) {
  display: none;
}

#factTableHbox {
  justify-content: end;
}

#factTableVbox {
  max-width: 100% !important;
}

#encodingTypeMenuList .custom-list-textbox {
  padding: 3px 10px;
}

#previewLimit {
  line-height: 22px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
  width: 30px !important;
}

span.gwt-RadioButton label {
  top: -2px;
  position: relative;
  white-space: normal !important;
}

:where(.responsive) .gwt-RadioButton {
  flex: 0 1 auto;
}

#otherRadio .gwt-TextBox {
  width: 100%;
}

.caption .captionIcon {
  display: inline-block;
}

/* Login Screen */

#login-wrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}

#login-header-wrapper {
  border-top: 4px solid #cc0000;
  height: 20px;
  width: 100%;
  padding: 11px 20px 15px;
  display: inline-flex;
  box-shadow: 0 2px 12px rgba(25,25,25,0.12);
}

#login-header-logo {
  background: url(images/header_logo.svg) no-repeat;
  height: 20px;
  width: 76px;
  margin-top: 3px;
}

#login-header-separator-box {
  display: inline-flex;
}

#login-header-separator {
  width: 10px;
  height: 20px;
  border-right: 1px solid #414141;
}

#login-header-separator-padding {
  width: 10px;
}

#login-header-app-name {
  color: #414141;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 20px;
  font-weight: 600;
}

#login-footer-wrapper {
  height: 20px;
  width: 100%;
  background-color: #414141;
  position: absolute;
  bottom: 0px;
  display: inline-flex;
  padding: 10px 20px;
}

#login-footer-company {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 20px;
  color: #ffffff;
}

#login-footer-copyright {
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 20px;
  color: #ffffff;
  margin-left: auto;
  margin-right: 40px;
}

#login-form-container h1 {
  display: none;
}

#login-background-main {
  width: 100%;
  height: 100%;
  background: url(images/bg.svg) no-repeat;
  background-position: bottom;
  background-color: #F5F5F5;
  background-size: cover;
}

#login-background-opacity {
  background-color: rgba(249, 249, 249, 1);
  height: calc(100% - 90px);
  min-width: 500px;
  float: right;
  overflow: auto;
}

#login-background {
  width: 310px;
  height: auto;
  margin: 0 auto;
  position: relative;
  padding-top: 60px;
}

#login-logo {
  background: url(images/hitachi_logo.svg) no-repeat center center;
  width: 100%;
  height: 65px;
}

#login-title {
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 20px;
  color: #414141;
  text-align: center;
  margin-bottom: 20px;
}

#login-messages {
  height: auto;
  min-height: 32px;
  padding: 10px;
}

.none-login-message-visible {
  background-color: rgba(0,0,0,0);
}
.some-login-message-visible {
  background-color: #f5d8d8;  /*sema9*/
}

.login-error-message {
  display: none;
  background-color: #f5d8d8;  /*sema9*/
  width: 100%;
}

.login-error-icon {
  background: url(images/Bad.sema4.S.svg) no-repeat center center;
  min-width: 32px;
  min-height: 32px;
}

.login-error-text {
  color: #414141; /*acce1*/
  line-height: 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 400;
  vertical-align: middle;
  padding-left: 10px;
  white-space: pre-wrap;
}

#login-input-container {
  height: 155px;
  top: 50%;
  margin-top: -77px;
  position: absolute;
}

#login input[type="text"],
#login input[type="password"] {
  border: 1px solid #bcbcbc;  /*atmo6*/
  border-radius: 0px;
  padding: 5px 10px 5px;
  width: 100%;
  height: auto;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #414141; /*acce1*/
  line-height: 20px;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 400;
  background-color: #ffffff;  /*atmo1*/
}

#login input[type="text"]:hover,
#login input[type="password"]:hover {
  border: 1px solid #414141;  /*acce1*/
  background-color: #ffffff;  /*atmo1*/
}

#login input[type="text"]:placeholder-shown,
#login input[type="password"]:placeholder-shown {
  color: #999999; /*atmo7*/
}

/*IE*/
#login input[type="text"]:-ms-input-placeholder,
#login input[type="password"]:-ms-input-placeholder {
  color: #999999; /*atmo7*/
}

#login input[type="text"]::-ms-clear,
#login input[type="password"]::-ms-clear {
  display: none;
}

#login input[type="text"]:disabled,
#login input[type="password"]:disabled {
  border: 1px solid #bcbcbc;  /*atmo6*/
  background-color: #f9f9f9;  /*atmo2*/
  cursor: not-allowed;
}

#login input[type="text"]:disabled:hover,
#login input[type="password"]:disabled:hover {
  border: 1px solid #bcbcbc;  /*atmo6*/
  background-color: #f9f9f9;  /*atmo2*/
  cursor: not-allowed;
}

#login input[type="text"]:focus,
#login input[type="password"]:focus {
  border: 1px solid #414141;  /*acce1*/
  background-color: #ffffff;  /*atmo1*/
}

#login input[type="text"]:focus:hover,
#login input[type="password"]:focus:hover {
  border: 1px solid #414141;  /*acce1*/
  background-color: #ffffff;  /*atmo1*/
}

.space-10 {
  margin-top: 10px;
}

.space-30 {
  margin-top: 30px;
}

.space-60 {
  margin-top: 60px;
}

.nowrap {
  white-space: nowrap;
}

#login .input-container {
  display: block;
}

#login .input-container label {
  padding-bottom: 10px;
  margin-bottom: 0px;
  color: #414141; /*acce1*/
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 16px;
  font-weight: 600;
}

#login .input-container:last-child label {
  display: none;
}

#login .input-container button,
#login .input-container button:link,
#login .input-container button:visited,
#login .input-container button:active,
#login .input-container button:focus {
  width: 140px;
  padding: 0 10px;
  min-width: 70px;
  text-align: center;
  vertical-align: middle;
  border-radius: 0px;
  border: 0 none;
  float: right;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 32px;
  min-height: 32px;
  filter: none;
  cursor: pointer;
  color: #FFF;
  background: #CC0000;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 20px;
  font-weight: 600;
}

#login .input-container button:hover,
#login .input-container button:focus {
  color: #FFF;
  background: #7C0B2B;
  filter: none;
}

#login-form-container {
}

#login,
#animate-wrapper > h1 {
  white-space: nowrap;
}

#evaluationPanel {
  position: relative;
  display: none;
}

#evaluationPanel {
  border: 1px solid #bcbcbc;
  width: 310px;
  background: #FFFFFF;
  padding: 20px 0;
}

#evaluationPanel > .span6 {
  width: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 0;
}

#evaluationPanel .login-label {
  background: url(images/Lock.S.svg) no-repeat left center;
  height: 24px;
  min-height: 0;
  line-height: 24px;
  width: 24px;
  font-size: 0;
}

#evaluationPanel .login-role + .row-fluid .login-label {
  background: url(images/User.S.svg) no-repeat left center;
}

#evaluationPanel .login-value {
  font-size: 14px;
  color: #414141;
  letter-spacing: 0.02em;
  line-height: 20px;
  font-weight: 400;
  padding-left: 5px;
}

#evaluationPanel .login-role ~ .row-fluid  {
  padding: 4px 10px 10px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#evaluationPanel .login-role + .row-fluid  {
  padding: 8px 10px 4px 0;
}

.IE8 #evaluationPanel {
  display: none;
}

#evaluationPanel.afterSlide {
  display: block;
}

.IE8 #evaluationPanel.afterSlide {
  display: block;
}

#role-business-user-panel {
  padding: 0 20px 0 15px;
}
#role-admin-panel {
  padding: 0 15px 0 20px;
}

.login-role {
  font-size: 14px;
  color: #414141;
  letter-spacing: 0.02em;
  line-height: 20px;
  font-weight: 600;
}

#evaluationPanel button.btn,
#evaluationPanel button.btn:link,
#evaluationPanel button.btn:visited,
#evaluationPanel button.btn:active,
#evaluationPanel button.btn:focus {
  width: 120px;
  padding: 0 10px;
  min-width: 70px;
  text-align: center;
  vertical-align: middle;
  border-radius: 0px;
  border: 1px solid #bcbcbc;  /*atmo6*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 32px;
  min-height: 32px;
  filter: none;
  cursor: pointer;
  color: #414141; /*acce1*/
  background: #ffffff;  /*atmo1*/
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 20px;
  font-weight: 600;
  filter: none;
}

#evaluationPanel button.btn:hover {
  background: #f0f0f0;  /*atmo4*/
  border: 0 none;
}

#evaluationPanel .btn {
}

#eval-users-toggle {
  color: #414141;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  vertical-align: top;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

#eval-users-toggle > div {
  display: inline-block;
}

#eval-arrow {
  height: 12px;
  width: 18px;
  background: url(images/DropDown.XS.svg) center center no-repeat;
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

#eval-arrow.closed {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}

/* end Login page styles */
.custom-dropdown-arrow {
  background-image: url('../images/dropdown_arrow_gray.png');
  background-repeat: no-repeat;
  height: 11px;
  width: 17px;
}

.custom-dropdown-arrow.custom-dropdown-pressed {
  background-image: url('../images/dropdown_arrow_blue.png');
}

.custom-dropdown-arrow.small {
  background-image: url('../images/arrow-dark-small.png');
  background-repeat: no-repeat;
  height: 8px;
  width: 12px;
}

.custom-dropdown-arrow.small.custom-dropdown-pressed {
  background-image: url('../images/arrow-light-small.png');
}

.custom-list-item-hover {
  background-color: #E0E0E0;
}

.custom-list-item-hover .gwt-Label {
  color: #414141;
}

.custom-list-item-selected {
  background-color: rgba(204, 0, 0, 0.2);
}

.objectlist a:hover {
  background: #E0E0E0;
  color: #414141;
}

.objectlist-selected a {
  cursor: pointer;
  background-color: rgba(204, 0, 0, 0.2);
  padding-left: 3px;
  padding-right: 3px;
  vertical-align: top;
  font-size: 12px;
}

.objectlist-selected a:hover {
  background-color: #E0E0E0;
}

#launch-widget-body {
  background-color: #F8F8F8;
}

/* analyzer disclosure panel arrow */
.tundra .pentaho-titled-toolbar .dijitArrowNode {
  background-image: url('../images/disclosure_open.png');
}

.tundra .pentaho-titled-toolbar.dijitClosed .dijitArrowNode {
  background-image: url('../images/disclosure_close.png');
}

.pc_pageControlContainer,
.dijitToolbar .pc_pageControlContainer {
  padding: 0px 1px 0px 1px;
  height: auto;
  vertical-align: middle;
}

.indicator {
  background-image: url("images/dropIndicator.png");
  background-repeat: no-repeat;
  background-position: left -2px;
}

.indicator .indicatorLine {
  background-color: #1973bc;
}

#standardDialog #dialogMessageBar .dlgInfo {
  background: url(images/info.png) no-repeat;
}

/* Analyzer drag and drop indicators */
.dnd-indicator-horizontal-left {
  background: url(images/dnd_left_arrow.png) no-repeat;
}

.dnd-indicator-horizontal-line {
  background: url(images/dnd_horz_line.png) repeat-x;  /* width will be set inline by javascript to be dynamic */
}

.dnd-indicator-horizontal-right {
  background: url(images/dnd_right_arrow.png) no-repeat;
}

.dnd-indicator-vertical-top {
  background: url(images/dnd_top_arrow.png);
}

.dnd-indicator-vertical-line {
  background: url(images/dnd_vert_line.png) repeat-y;  /* height will be set inline by javascript to be dynamic */
}

.dnd-indicator-vertical-bottom {
  background: url(images/dnd_bottom_arrow.png);
}

/* PIR drag and drop indicators */
.dropActiveHorizontal {
  background: transparent url(images/group_line_bg_active.png) repeat-x;
}

.dropActiveVertical {
  background: transparent url(images/col_line_bg_active.png) repeat-y;
}

.dropHiliteHorizontal {
  background: transparent url(images/group_line_bg_aadditional.png) repeat-x;
}

.dropHiliteVertical {
  background: transparent url(images/col_line_bg_additional.png) repeat-y;
}

.dropLeftArrow {
  background: transparent url(images/left_arrow.png);
}

.dropRightArrow {
  background: transparent url(images/right_arrow.png);
}

.dropTopArrow {
  background: transparent url(images/top_arrow.png);
}

.dropBottomArrow {
  background: transparent url(images/bottom_arrow.png);
}

/* region Toolbar buttons */
.pentaho-smallmeasurebutton, .pentaho-smalldimensionbutton, .pentaho-smallhierarchybutton,
.pentaho-smalllevelbutton, .pentaho-smallmemberpropbutton, .pentaho-smallcategorybutton,
.pentaho-fieldbutton, .pentaho-autopopulatebutton, .pentaho-addfieldbutton,
.pentaho-refreshbutton, .pentaho-helpbutton, .pentaho-clearmodelbutton,
.pentaho-smallremovebutton, .pentaho-expandallbutton, .pentaho-collapseallbutton,
.penatho-smalleditbutton, .pentaho-warningbutton, .pentaho-updatebutton,
.pentaho-smallmodelbutton, .pentaho-column, .pentaho-movearrowbutton,
.pentaho-movearrowbackbutton, .sidePanelIconCommon {
  --icon-height: 16;
  --icon-width: 16;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));

  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.pentaho-smallmeasurebutton {
  background-image: url("images/gemBar_measure.png");
}

.pentaho-smalldimensionbutton {
  background-image: url("images/sm_dim_icon.png");
}

.pentaho-smallhierarchybutton {
  --icon-height: 13;
  --icon-width: 13;

  background-image: url("images/sm_hierarchy_icon.png");
}

.pentaho-smalllevelbutton {
  background-image: url("images/gemBar_level.png");
}

.pentaho-smallmemberpropbutton {
  background-image: url("images/sm_member_prop_icon.png");
}

.pentaho-smallcategorybutton {
  background-image: url("images/folder_16.png");
}

.pentaho-fieldbutton {
  background-image: url("images/list_16.png");
}

.pentaho-autopopulatebutton {
  background-image: url("images/auto_model.png");
}

.pentaho-addfieldbutton {
  background-image: url("images/add_to_model.png");
}

.pentaho-refreshbutton {
  background-image: url("../images/refresh.png");
}

.pentaho-helpbutton {
  background-image: url("../images/help_link.png");
}

.pentaho-clearmodelbutton {
  background-image: url("images/clear_model_16.png");
}

.pentaho-smallremovebutton {
  background-image: url("images/remove16x16.png");
}

.pentaho-expandallbutton {
  --icon-height: 15;
  --icon-width: 15;

  background-image: url("images/ExpandAll.png");
}

.pentaho-collapseallbutton {
  --icon-height: 15;
  --icon-width: 15;

  background-image: url("images/CollapseAll.png");
}

.penatho-smalleditbutton {
  background-image: url("images/edit_16.png");
}

.pentaho-warningbutton {
  background-image: url("../images/warning.png");
}

.pentaho-updatebutton {
  --icon-height: var(--icon-height-root);
  --icon-width: var(--icon-width-root);

  background-image: url("images/edit_22.png");
}

.pentaho-smallmodelbutton {
  background-image: url("../images/sm_model_icon.png");
}

.pentaho-column {
  background-image: url("images/column.png");
}

.pentaho-updatebutton.pentaho-imagebutton-disabled {
  --icon-height: 16;
  --icon-width: 16;

  background-image: url("../images/updateDisabled.png");
}

.pentaho-movearrowbutton {
  background-image: url("images/accum_add.png");
}

.pentaho-movearrowbackbutton {
  background-image: url("images/accum_remove.png");
  background-repeat: no-repeat;
}
/* endregion Toolbar buttons */

.pentaho-chevron {
  background-image: url("images/16x16_right.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  background-origin: content-box;
  background-position: 0 2px;
}

.pentaho-filechooseupbutton {
  background-image: url("images/up.png");
  margin: 0 !important;
  /* 22px on 14px font */
  width: calc(1em * 22/var(--typ-body-font-size-px));
  height: auto;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
  align-self: center;
}

.IE #browse-properties-dialog {
  height: 500px;
}

.IE #browse-properties-dialog>div>table {
  height: 465px !important;
}

.IE #browse-properties-dialog .dialogContent {
  position: relative;
}

.IE #browse-properties-dialog .pentaho-tab-panel {
  position: absolute;
  top: 0px;
  left: 0px;
  height: auto !important;
}

.reportMain .trashcan {
  background-image: url('images/trashcan.png');
  background-repeat: no-repeat;
  background-position: 4px 2px;
}

.reportMain .trashActive {
  background-image: url('images/trashcan_full.png');
  background-repeat: no-repeat;
  background-position: 4px 2px;
}

/* analyzer icons  */
:is(.gem-bar-level, .gem-bar-measure) {
  --icon-height: 16;
  --icon-width: 16;
  background-repeat: no-repeat;
}

.gem-bar-level {
  background-image: url('images/gemBar_level.png');
}

.gem-bar-measure {
  background-image: url('images/gemBar_measure.png');
}

.gem-bar-filter {
  background-image: url('images/gemBar_filter.png');
  background-repeat: no-repeat;
  width: 35px;
}

.field-panel-icon {
  background-image: url('images/field_panel.png');
}

.field-layout-icon {
  background-image: url('images/layoutpanel.png');
}

.pentaho-filterbutton {
  background-image: url('images/filter.png');
}

.auto-refresh-icon {
  background-image: url('images/autoRefresh.png');
}

.more-menu-icon {
  background-image: url('images/more_menu.png');
}

.show-pivot-icon {
  background-image: url('images/btn_table.png');
  border: 1px solid transparent;
}

.show-chart-icon {
  background-image: url('images/btn_chart.png');
  border: 1px solid transparent;
}

.textfield-icon {
  background-image: url('images/prompt_controls/textfield.png');
  background-repeat: no-repeat;
  --icon-height: 32;
  --icon-width: 32;
  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));
}

.format-wrapper .textfield-icon {
  background-position: -4px -4px;
  --icon-height: 24;
  --icon-width: 24;
}

#arrow-menu,
.arrow-menu-icon {
  background-image: url('images/arrow_menu.png');
  background-repeat: no-repeat;
}

.tundra .pentaho-titled-toolbar.dijitClosed .dijitArrowNode,
.filterPaneToggle {
  background-image: url('images/arrow_closed.png');
  background-repeat: no-repeat;
}

.tundra .pentaho-titled-toolbar .dijitArrowNode,
.filterSummary .hide {
  background-image: url('images/arrow_open.png');
  background-repeat: no-repeat;
  background-position: center left;
}

.fieldListTree .folder {
  padding-left: 15px;
}

.folderClose {
  background-image: url('images/arrow_closed.png');
  background-repeat: no-repeat;
}

.folderOpen {
  background-image: url('images/arrow_open.png');
  background-repeat: no-repeat;
}

.helpIcon {
  background-image: url('images/help_link.png');
  background-repeat: no-repeat;
}

/* ---------- PIR icons ----------  */
.tundra :is(.dijitEditorIconUndo, .dijitEditorIconRedo, .dijitEditorIconIndent, .dijitEditorIconBold,
.dijitEditorIconItalic, .dijitEditorIconForeColor, .dijitEditorIconBackColor, .dijitEditorIconCopy,
.dijitEditorIconPaste, .dijitEditorIconDelete, .dijitEditorIconJustifyLeft, .dijitEditorIconJustifyCenter,
.dijitEditorIconJustifyRight, .dijitEditorIconSelectAll, .dijitEditorIconFilter, .dijitEditorIconCut),
:is(.filterIndicatorBackground_1, .filterIndicatorBackground_2, .filterIndicatorBackground_3, .filterIndicatorBackground_4,
.filterIndicatorBackground_5, .filterIndicatorBackground_6, .filterIndicatorBackground_7, .filterIndicatorBackground_8,
.filterIndicatorBackground_9, .filterIndicatorBackground_9_plus, .pentaho_dijitEditorIconExport, .field-panel-icon,
.field-layout-icon, .pentaho-filterbutton, .auto-refresh-icon, .more-menu-icon, .show-pivot-icon, .show-chart-icon) {
  background-position: initial;
  background-repeat: no-repeat;
}

.tundra :is(.dijitEditorIconUndo, .dijitEditorIconRedo, .dijitEditorIconIndent, .dijitEditorIconSelectAll,
.dijitEditorIconFilter, .dijitEditorIconCut, .pentaho_dijitEditorIconExport, span.dijitEditorIconParameters,
span.dijitEditorIconRefresh),
:is(.pc_pagePrev, .pc_pagePrevDisabled, .pc_pageNext, .pc_pageNextDisabled, .field-panel-icon, .field-layout-icon,
.pentaho-filterbutton, .auto-refresh-icon, .more-menu-icon, .show-pivot-icon, .show-chart-icon,
.pentaho-optionsdatasourcebutton) {
  --icon-height: 22;
  --icon-width: 22;

  height: calc(1px * var(--icon-height));
  width: calc(1px * var(--icon-width));
}

.tundra .dijitEditorIcon.dijitEditorIconUndo {
  background-image: url('images/undo.png');
}

.tundra .dijitDisabled .dijitEditorIconUndo {
  background-image: url('images/undo_disable.png');
}

.tundra .dijitEditorIcon.dijitEditorIconRedo {
  background-image: url('images/redo.png');
}

.tundra .dijitDisabled .dijitEditorIconRedo {
  background-image: url('images/redo-disabled.png');
}

.tundra .dijitEditorIconIndent {
  background-image: url('images/busy_thin.gif');
  background-size: contain;
}

.tundra .dijitEditorIcon.dijitEditorIconBold {
  background-image: url('images/bold.png');
}

.tundra .dijitDisabled .dijitEditorIconBold {
  background-image: url('images/bold_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconItalic {
  background-image: url('images/italic.png');
}

.tundra .dijitDisabled .dijitEditorIconItalic {
  background-image: url('images/italic_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconForeColor {
  background-image: url('images/font_color.png');
}

.tundra .dijitDisabled .dijitEditorIconForeColor {
  background-image: url('images/font_color_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconBackColor {
  background-image: url('images/back_color.png');
}

.tundra .dijitDisabled .dijitEditorIconBackColor {
  background-image: url('images/back_color_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconCopy {
  background-image: url('images/copy_format.png');
}

.tundra .dijitDisabled .dijitEditorIconCopy {
  background-image: url('images/copy_format_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconPaste {
  background-image: url('images/paste_format.png');
}

.tundra .dijitDisabled .dijitEditorIconPaste {
  background-image: url('images/paste_format_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconDelete {
  background-image: url('images/remove_format.png');
}

.tundra .dijitDisabled .dijitEditorIconDelete {
  background-image: url('images/remove_format_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconJustifyLeft {
  background-image: url('images/align_left.png');
}

.tundra .dijitDisabled  .dijitEditorIconJustifyLeft {
  background-image: url('images/align_left_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconJustifyCenter {
  background-image: url('images/align_center.png');
}

.tundra .dijitDisabled .dijitEditorIconJustifyCenter {
  background-image: url('images/align_center_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconJustifyRight {
  background-image: url('images/align_right.png');
}

.tundra .dijitDisabled .dijitEditorIconJustifyRight {
  background-image: url('images/align_right_disabled.png');
}

.tundra .dijitEditorIcon.dijitEditorIconSelectAll {
  background-image: url('images/select_all.png');
}

.tundra .dijitEditorIcon.dijitEditorIconFilter {
  background-image: url('images/filter.png');
}

.tundra .dijitEditorIcon.dijitEditorIconCut {
  background-image: url('images/layoutpanel.png');
}

.filterIndicatorBackground_1 {
  background-image: url("images/filter_indicators/num_filter_bg_1.png");
}

.filterIndicatorBackground_2 {
  background-image: url("images/filter_indicators/num_filter_bg_2.png");
}

.filterIndicatorBackground_3 {
  background-image: url("images/filter_indicators/num_filter_bg_3.png");
}

.filterIndicatorBackground_4 {
  background-image: url("images/filter_indicators/num_filter_bg_4.png");
}

.filterIndicatorBackground_5 {
  background-image: url("images/filter_indicators/num_filter_bg_5.png");
}

.filterIndicatorBackground_6 {
  background-image: url("images/filter_indicators/num_filter_bg_6.png");
}

.filterIndicatorBackground_7 {
  background-image: url("images/filter_indicators/num_filter_bg_7.png");
}

.filterIndicatorBackground_8 {
  background-image: url("images/filter_indicators/num_filter_bg_8.png");
}

.filterIndicatorBackground_9 {
  background-image: url("images/filter_indicators/num_filter_bg_9.png");
}

.filterIndicatorBackground_9_plus {
  background-image: url("images/filter_indicators/num_filter_bg_9p.png");
}

.tundra .dijitDisabled .dijitEditorIconIndent {
  --icon-height: 20;
  --icon-width: 20;

  background-image: url("images/indicator_circle_ball_stop.png");
  margin: 1px;
}

.pentaho_dijitEditorIconExport {
  background-image: url('images/file_export.png');
}

.dijitTooltipBelow .dijitTooltipConnector {
  background-image: url("images/connector_top.png");
  background-position: top left;
  background-repeat: no-repeat;
  display: none;
}

.closeIcon {
  background-image: url('images/closeTab_active.png');
  background-position: top left;
  background-repeat: no-repeat;
}

.tundra .dijitTooltipContainer .pentaho-tabWidget {
  padding: 2px 8px;
}

.pc_pagePrev,
.dijitToolbar .pc_pagePrev {
  background-image: url('images/page_back.png') !important;
  background-repeat: no-repeat;
  background-position: 1px 3px !important;
}

.pc_pagePrevDisabled,
.dijitToolbar .pc_pagePrevDisabled {
  background-image: url('images/page_back_disabled.png') !important;
  background-repeat: no-repeat;
  background-position: 1px 3px !important;
}

.pc_pageNext,
.dijitToolbar .pc_pageNext {
  background-image: url('images/page_forward.png') !important;
  background-repeat: no-repeat;
  background-position: 1px 3px !important;
}

.pc_pageNextDisabled,
.dijitToolbar .pc_pageNextDisabled {
  background-image: url('images/page_forward_disabled.png') !important;
  background-repeat: no-repeat;
  background-position: 1px 3px !important;
}

.pentaho-optionsbutton {
  background-image: url('images/options.png');
  padding: 2px;
  border: 1px solid transparent;
}

.pentaho-optionsdatasourcebutton {
  --icon-height: 32;
  --icon-width: 32;

  background-image: url('images/options.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.dijitEditorIconParameters,
.dijitToolbar .dijitEditorIconParameters {
  background-image: url('images/list_22x22.png') !important;
  background-repeat: no-repeat;
  background-position: initial !important;
}

.dijitEditorIconRefresh,
.dijitToolbar .dijitEditorIconRefresh {
  background-image: url('images/refresh_report.png') !important;
  background-repeat: no-repeat;
  background-position: initial !important;
}

.tundra .dijitToolbar .dijitButtonChecked,
.tundra .dijitToolbar .dijitToggleButtonChecked,
.tundra .dijitToolbar#toolbar .dijitButtonChecked,
.tundra .dijitToolbar#toolbar .dijitToggleButtonChecked {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #CC0000;
}

.tundra .dijitToolbar .dijitButtonHover,
.tundra .dijitToolbar .dijitToggleButtonHover,
.tundra .dijitToolbar .dijitDropDownButtonHover,
.tundra .dijitToolbar .dijitComboButton .dijitButtonContentsHover,
.tundra .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover,
.tundra .dijitToolbar#toolbar .dijitButtonHover,
.tundra .dijitToolbar#toolbar .dijitToggleButtonHover,
.tundra .dijitToolbar#toolbar .dijitDropDownButtonHover,
.tundra .dijitToolbar#toolbar .dijitComboButton .dijitButtonContentsHover,
.tundra .dijitToolbar#toolbar .dijitComboButton .dijitDownArrowButtonHover {

  /* TODO: change this from Hover to Selected so that button is still highlighted while drop down is being used */
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #CC0000;
}

#toolbar2a {
  background-color: #FFF;
}

.pageSetupDialogLandscape {
  background: url('images/landscape_off.png') no-repeat;
}

.pageSetupDialogLandscape:hover {
  background-image: url(images/landscape_on.png);
}

.pageSetupDialogLandscapeSelected {
  background: url('images/landscape_on.png') no-repeat;
}

.pageSetupDialogPortrait {
  background: url('images/portrait_off.png') no-repeat;
}

.pageSetupDialogPortrait:hover {
  background-image: url(images/portrait_on.png);
}

.pageSetupDialogPortraitSelected {
  background: url('images/portrait_on.png') no-repeat;
}

/* ----------  data access ----------  */
#filterTypeDeck #staticSelectionTableEditSelected img,
#editPovContainerPanel #povTableEditSelected img {
  background: url('images/edit_16.png') no-repeat;
}

#filterTypeDeck #staticSelectionTableAdd img,
#editPovContainerPanel #povTableAdd img {
  background: url('images/add_16.png') no-repeat;
}

#filterTypeDeck #staticSelectionTableRemoveSelected img,
#editPovContainerPanel #povTableRemoveSelected img {
  background: url('images/remove_16.png') no-repeat;
}

.metric-filter-dialog .filterConditionDelete {
  background-image: url('images/remove_16.png');
}

.metric-filter-dialog .filterConditionEdit {
  background-image: url('images/edit_16.png');
}

#editPovContainerPanel #povTableMoveSelectedDown img,
#filterTypeDeck #staticSelectionTableMoveSelectedDown img {
  background: url('images/16x16_down.png') no-repeat;
}

#filterTypeDeck #staticSelectionTableMoveSelectedUp img,
#editPovContainerPanel #povTableMoveSelectedUp img {
  background: url('images/16x16-up.png') no-repeat;
}

#schemaNameLabel,
#uploadFileLabel {
  border: 1px solid #CCC;
  vertical-align: middle;
  height: 18px !important;
  width: 365px !important;
  overflow: hidden;
  padding: 5px;
  border-radius: 4px;
}

#propertiesPanelTitle {
  width: 200px !important;
  height: 25px !important;
}

#propertiesPanelRefreshPeriod {
  width: 30px !important;
  height: 25px !important;
}

.flag {
  background-image: url('images/flag-right.png');
  background-position: top right;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: transparent;
}

#toppanelinner {
  padding: 0 4px 0 0;
}

.trashcan {
  background: url('images/trashcan.png') no-repeat;
}

#datasource-button-bar {
  align-items: center;
}

.trashcan:hover {
  background: url('images/trashcan_full.png') no-repeat scroll;
}

.colorpickertabs.tabpanel {
  padding: 0px;
  height: 230px;
  width: 222px;
  display: block;
  border: 1px solid #CCC;
  background-color: #fff;
}

.clickable {
  cursor: pointer;
}

#modelSelectDialog div.dijitSelect {
  display: inline-table;
  width: 345px !important;
}

div.listbox {
  display: inline-table;
  width: 345px !important;
  height: 100px !important;
  border: 1px solid #CCC;
  margin: 0.2em;
  border-collapse: collapse;
}

div.listbox .pentaho-listbox {
  width: 345px !important;
  height: 100px !important;
}

/* Dashboard prompt controls */
#filterControlsGroupbox :is(
#dropDownFilterButton,
#listFilterButton,
#radioFilterButton,
#checkboxFilterButton,
#buttonFilterButton,
#textfieldFilterButton,
#datepickerFilterButton) img {
  --icon-height: 32;
  --icon-width: 32;

  background-position: center;
  background-repeat: no-repeat;
}

#filterControlsGroupbox #dropDownFilterButton img {
  background-image: url("images/prompt_controls/dropdown.png");
}

#filterControlsGroupbox #dropDownFilterButton .toolbar-toggle-button-down img {
  background-image: url("images/prompt_controls/dropdown_selected.png");
}

#filterControlsGroupbox #listFilterButton img {
  background-image: url("images/prompt_controls/list.png");
}

#filterControlsGroupbox #listFilterButton .toolbar-toggle-button-down img {
  background-image: url("images/prompt_controls/list_selected.png");
}

#filterControlsGroupbox #radioFilterButton img {
  background-image: url("images/prompt_controls/radio.png");
}

#filterControlsGroupbox #radioFilterButton .toolbar-toggle-button-down img {
  background-image: url("images/prompt_controls/radio_selected.png");
}

#filterControlsGroupbox #checkboxFilterButton img {
  background-image: url("images/prompt_controls/checkbox.png");
}

#filterControlsGroupbox #checkboxFilterButton .toolbar-toggle-button-down img {
  background-image: url("images/prompt_controls/checkbox_selected.png");
}

#filterControlsGroupbox #buttonFilterButton img {
  background-image: url("images/prompt_controls/button.png");
}

#filterControlsGroupbox #buttonFilterButton .toolbar-toggle-button-down img {
  background-image: url("images/prompt_controls/button_selected.png");
}

#filterControlsGroupbox #textfieldFilterButton img {
  background-image: url("images/prompt_controls/textfield.png");
}

#filterControlsGroupbox #textfieldFilterButton .toolbar-toggle-button-down img {
  background-image: url("images/prompt_controls/textfield_selected.png");
}

#filterControlsGroupbox #datepickerFilterButton img {
  background-image: url("images/prompt_controls/datepicker.png");
}

#filterControlsGroupbox #datepickerFilterButton .toolbar-toggle-button-down img {
  background-image: url("images/prompt_controls/datepicker_selected.png");
}

#stepsPanel {
  border-right: 1px solid #CCC;
  width: 30% !important;
  max-width: fit-content;
  /* When overflowing, make sure the right border extends to and covers the dialog-content's bottom padding area. */
  margin-bottom: calc(-1 * var(--dialog-padding));
}

#step_grid {
  position: sticky;
  top: calc(-1 * var(--focus-ring-padding) - 1px);
  background: white;
  z-index: 1;
}

#step_grid td > div.xul-label {
  padding-right: 20px !important;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces !important;
  word-wrap: normal !important;
  word-break: keep-all !important;
}

#step_grid .gwt-grid :is(.xul-image, .xul-label) {
  padding-top: 5px;
  padding-bottom: 10px;
}

#step_grid .gwt-grid {
  --layout-gap-h: 3px;
}

#steps_image_spacer {
  min-height: var(--layout-gap-v);
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: auto !important;
}

#steps_image_spacer::after {
  display: block;
  content: "";

  flex: none;
  width: 100%;
  height: 100%;

  background-image: url(images/bg_steps_2.png);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: right -2px bottom;
  background-size: 100% auto;

  opacity: 0.5;
}

#fileUpload {
  max-width: 480px;
  width: auto !important;
}

#fileImportEditorWindow {
  max-width: 480px;
}

/* instaview fiel type icon? */
.pentaho-selectlist-item-data {
  background-image: url("images/database.png");
  background-repeat: no-repeat;
  background-position: left center;
  height: 22px;
}

/* layout anel gem styling */
.gem {
  height: 17px;
  border-radius: 0px;
  padding: 1px 5px;
  margin-bottom: 4px;
  min-width: 120px;
  background: #FDF296;
  border: 1px solid #D6B225;
}

.IE .gem {
  background: #FDF296;
}

.IE .gem[type="measure"] {
  background: #DDF4FC;
}

.propPanel_gemBar {
  background: #F8F8F8;
  border: 0px;
}

.gem[type="measure"] {
  background: #DDF4FC;
  border: 1px solid #7EC9F2;
}

/* BACKLOG-26222 Fixing IE bug. IE doesnt always clear de hover pseudo class */
.IE11 .propPanelItem .gem:hover[type="measure"] {
  background: #DDF4FC;
  border: 1px solid #7EC9F2;
}

.IE11 .dojoDndContainerOver div.gem.over[type="measure"] {
  background: #E6EFF6;
  border: 1px solid #8ac06e;
  -moz-box-shadow: #F2FBE8 0px 0px 1px 1px inset;
  -webkit-box-shadow: #F2FBE8 0px 0px 1px 1px inset;
}

.gem.over[type="measure"] {
  background: #E6EFF6;
  border: 1px solid #8ac06e;
  -moz-box-shadow: #F2FBE8 0px 0px 1px 1px inset;
  -webkit-box-shadow: #F2FBE8 0px 0px 1px 1px inset;
}

.gem.over {
  background: #CBEFA3;
  border: 1px solid #87DF27;
  -moz-box-shadow: #F2FBE8 0px 0px 1px 1px inset;
  -webkit-box-shadow: #F2FBE8 0px 0px 1px 1px inset;
}

.gem .gemMenuHandle {
  float: right;
  background-image: url('images/16x16_down.png');
}

.gem.over .gemMenuHandle {
  background-image: url('images/16x16_down.png');
}

.gem.over .gemMenuHandle.over {
  background-image: url('images/16x16_down.png');
}

#fieldListTree .gem .gemMenuHandle {
  float: right;
  background-image: url('images/16x16_down.png');
}

#fieldListTree .gem.over .gemMenuHandle {
  background-image: url('images/16x16_down.png');
}

#fieldListTree .gem.over .gemMenuHandle.over {
  background-image: url('images/16x16_down.png');
}

#getting-started-message-content #title {
  font-size: 22px;
  color: #414141;
  font-family: opensanslight;
  line-height: 30px;
  padding-bottom: 10px;
}

#getting-started-message-content #message {
  font-size: 14px;
  line-height: 20px;
}

#getting-started-message-content #sub-messages {
  left: 15px;
}

.bootstrap #getting-started div.tab-content {
  height: auto;
  min-height: 320px;
}

.welcome-img {
  padding: 0 10px 0 0;
}

#video-container {
  padding-right: 15px;
  display: flex;
  align-items: center;
  height: 100%;
}

#getting-started .card {
  display: block;
  border-top: 0px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid #CCC;
  border-right: 1px solid transparent;
  padding: 10px;
  padding-top: 14px;
  max-width: 150px;
  flex: none;
  width: 20vw;
  min-width: 0;
}

#getting-started .card:focus-visible {
  margin: 3px;
}

#launch-widget .card {
  border-bottom: 0px solid transparent;
  border-left: 1px solid transparent;
  border-top: 1px solid #CCC;
  border-right: 1px solid transparent;
  padding: 10px;
  padding-top: 14px;
}

#launch-widget .tutorial-card {
  width: 300px;
}

#launch-widget .sample-card {
  width: 500px;
}

#launch-widget .selected {
  background-color: #FFF;
  border-bottom: 4px solid #CC0000;
  border-left: 1px solid #CCC;
  border-top: 1px solid #fff;
  border-right: 1px solid #CCC;
  padding-top: 10px;
}

#getting-started .selected {
  background-color: #FFF;
  border-top: 4px solid #CC0000;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #fff;
  border-right: 1px solid #CCC;
  padding-top: 10px;
}

#getting-started .card-img,
#launch-widget .card-img {
  width: 150px;
  height: 100px;
}

#getting-started .card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 150/100;
  background-size: contain;
}

#getting-started .selector-column {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 190px;
  height: 381px;
}

#launch-widget .horizontal-selector {
  overflow-x: auto;
  overflow-y: hidden;
  position: absolute;
  bottom: 0;
}

#getting-started .vertical-selector {
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
}

#launch-widget .horizontal-selector,
#getting-started .vertical-selector {
  background-color: #F8F8F8;
  padding: 0px;
  font-size: 12px;
  border-top: 0px solid #CCC;
}

#launch-widget.widget-panel .tab-content {
  padding-left: 0px;
}

#getting-started #tab2 .details-img {
  width: 100%;
  height: auto;
  bottom: 4px;
  aspect-ratio: 644/299;
  background-size: contain;
  background-origin: content-box;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#getting-started #tab3 .details-img {
  width: 100%;
  height: auto;
  aspect-ratio: 644/299;
  bottom: 8px;
  background-size: contain;
  background-origin: content-box;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#getting-started .details-content {
  width: 35%;
}

.details-content {
  padding: 20px 0 0 20px;
}

#getting-started .detail-title {
  padding: 0 0 20px 0;
}

#launch-widget .detail-title {
  padding: 0 0 10px 0;
}

.detail-title {
  font-family: OpenSansLight, Helvetica, Arial, Sans serif;
  font-size: 16px;
  line-height: 22px;
  color: #414141;
}

.detail-description {
  padding: 0 0 20px 0;
  font-size: 14px;
  color: #333;
}

#getting-started .detail-description {
  font-size: 16px;
  line-height: 22px;
  display: none;
}

#getting-started .button-container {
  position: unset;
  z-index: 1;
  top: 200px;
  left: 250px;
}

#getting-started-media-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
}

#getting-started .pentaho-button {
  font-size: 14px;
  padding-right: calc(0.5ch + (1em * 16/var(--typ-body-font-size-px)) + 14px);
  padding-top: 9px;
  padding-bottom: 9px;
  background: #CC0000 url("images/open_new_window.png") no-repeat right 14px center;
  border-radius: 4px;
  width: 220px;
  color: #FFF;
  background-size: auto calc(1em * 16/var(--typ-body-font-size-px));
  text-overflow: ellipsis;
  overflow: hidden;
}

#getting-started #tab2 .pentaho-button {
  width: auto;
}

#getting-started #tab2 #sample-details #sample-details-content,
#getting-started #tab3 #tutorial-details #tutorial-details-content {
  width: 70%;
}

#getting-started .pentaho-button:hover {
  background-color: #7C0B2B;
  border-color: #7C0B2B;
}

#getting-started .pentaho-button:focus-visible {
  background-color: #7C0B2B;
  border-color: #7C0B2B;
}

#launch-widget #sample-container {
  height: 462px;
  padding: 0 20px;
}

#sample-sub-container {
  border: 1px solid #CCC;
  width: 100%;
  height: 100%;
}

#launch-widget .detail-title {
  padding: 0 0 10px 0;
}

#launch-widget .tab-pane {
  height: 1000px;
}

#launch-widget #tab1,
#launch-widget #tab2,
#launch-widget #tab3 {
  height: 760px;
  position: relative;
}

#getting-started #welcome-video {
  width: 100%;
}

#getting-started #welcome-video > iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 551/310;
}

#launch-widget #welcome-video {
  padding: 98px 0 0 0;
}

#launch-widget #sample {
  height: 480px;
}

#launch-widget-container.main-container {
  padding-top: 0px;
}

#launch-widget {
  padding-top: 0px;
}

#launch-widget-title-row-span {
  padding: 0 19px;
}

#launch-widget-title-row #logo {
  background-image: url('../images/logo.png');
  width: 185px;
  height: 50px;
  float: right;
  margin: 10px 0;
}

#launch-widget-title-row #launch-widget-title {
  float: left;
  margin-top: 25px;
}

.file-unknown {
  background: url("images/file_generic_32.png");
}

.file-url {
  background: url("images/file_url_32.png");
}

.resize-wrapper-top,
.resize-wrapper-inner {
  background: #144b64;
}

.icon-table {
  height: 16px;
  width: 16px;
  background: url("images/table.png");
}

.icon-fact-table {
  height: 16px;
  width: 16px;
  background: url("images/table_fact.png");
}

.fileBrowserColumn .body .file.icon.cda::before {
  background-image: url("../images/cda_20.png");
}

.fileBrowserColumn .body .file.icon.wcdf::before {
  background-image: url("../images/cde_20.png");
}

.file-cda {
  background: url("../images/cda_32.png") no-repeat;
}

.file-wcdf {
  background: url("../images/cde_32.png") no-repeat;
}

.dijitPopup.dijitCalendarPopup  .dijitCalendarContainer .dijitDownArrowButton .dijitArrowButtonInner {
  background: url("images/16x16_down.png") no-repeat scroll center;
  width: 16px;
  height: 16px;
  margin: 0;
}

.dijitPopup .dijitCalendarContainer .dijitCalendarIncrementControl.dijitCalendarDecrease {
  background: url("images/16x16_left.png") no-repeat scroll center;
  width: 16px;
  height: 16px;
  margin: 0;
}

.dijitPopup .dijitCalendarContainer .dijitCalendarIncrementControl.dijitCalendarIncrease {
  background: url("images/16x16_right.png") no-repeat scroll center;
  width: 16px;
  height: 16px;
  margin: 0;
}

.dijitPopup.dijitCalendarPopup .dijitCalendarContainer {
  border: 2px solid #CCC;
  background-color: #FFF;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.dijitCalendarContainer .dijitCalendarMonthContainer .dijitDropDownButton {
  border: 1px solid #CCC;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 97%;
  border-radius: 4px;
}

.dijitCalendarPopup.dijitPopup .dijitCalendarContainer * {
  background-color: #FFFFFF;
  background-image: none;
}

.dijitCalendarContainer .dijitCalendarSelectedDate,
.dijitCalendarContainer .dijitCalendarSelectedDate .dijitCalendarDateLabel,
.dijitCalendarContainer .dijitCalendarSelectedYear {
  background-color: #CC0000 !important;
  color: #FFF;
}

.dijitCalendarContainer .dijitCalendarCurrentMonth.pentaho-listitem-hover,
.dijitCalendarContainer .dijitCalendarCurrentMonth.pentaho-listitem-hover span,
.dijitCalendarContainer .dijitCalendarCurrentMonth.dijitCalendarHoveredDate,
.dijitCalendarContainer .dijitCalendarCurrentMonth.dijitCalendarHoveredDate span {
  background-color: #CC0000;
  color: #FFF;
}

.dijitCalendarMonthMenu.dijitMenu {
  background-color: #FFF;
  border: 2px solid #CCC;
  border-top: none;
}

.dijitCalendarMonthMenu.dijitMenu .dijitCalendarMonthLabel,
.dijitCalendarContainer .dijitDropDownButton .dijitButtonText,
.dijitCalendarPopup.dijitPopup .dijitCalendarContainer {
  font-family: OpenSansLight;
  font-weight: normal;
}

.dijitCalendarMonthLabel.dijitCalendarCurrentMonthLabel {
  font-weight: normal;
}

.dijitCalendarMonthMenu.dijitMenu .dijitCalendarMonthLabelHover {
  background-color: #E0E0E0;
  color: #000;
}

.dijitCalendarMonthMenu.dijitMenu .dijitCalendarMonthLabelHover:active {
  background-color: #E0E0E0;
}

.dijitCalendarContainer .dijitCalendarDayLabelTemplate {
  border-top: none;
  color: #666;
  padding-bottom: 10px
}

.dijitCalendarContainer .dijitCalendarYearLabel {
  border-top: none;
  margin-top: 10px;
}

.dijitCalendarContainer .dijitCalendarDateTemplate {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 1px;
  padding-right: 1px;
  text-align: center;
  font-weight: 400;
}

.dijitCalendarContainer [widgetid*=lookup_popup_mddb] {
  position: relative;
  left: -2px;
}

[id*=DP] .dijitDownArrowButton,
div.dijitDateTextBox .dijitDownArrowButton {
  height: 33px;
  background-image: none !important;
}

[id*=DP] .dijitDownArrowButton input,
div.dijitDateTextBox .dijitDownArrowButton input {
  padding: 0px;
}

#widget_DP_range1_lookup,
#widget_DP_range2_lookup,
div.dijitDateTextBox {
  width: 120px;
}

#date-picker-dlg-wrapper {
  width: 100%;
}

.dialog-content #date-picker-dlg-wrapper .dijitComboBox .dijitArrowButton,
div.dijitDateTextBox.dijitComboBox .dijitArrowButton {
  border: none;
  box-shadow: none;
  border-radius: 0 3px 3px 0;
}

#date-picker-dlg-wrapper .dijitComboBox {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

#date-picker-dlg-wrapper #DP_range1,
#date-picker-dlg-wrapper #DP_range2 {
  text-align: center;
}

#DP_range1 #widget_DP_range1_lookup,
div.dijitDateTextBox.dijitTextBox {
  margin: auto;
}

#DP_range1_lookup,
#DP_range2_lookup,
div.dijitDateTextBox input.dijitInputInner[type='text'] {
  padding-right: 0px;
  padding-top: 0px;
  padding-left: 5px !important;
  padding-bottom: 0px;
  text-align: left;
}

#widget_DP_range1_lookup_dropdown, #widget_DP_range2_lookup_dropdown {
  --widget-margin-top: 10px;

  margin-top: var(--widget-margin-top) !important;
  margin-left: -34px !important;

  max-height: calc(100vh - var(--widget-margin-top));
  overflow-y: auto;
}

div.dijitPopup.dijitCalendarPopup {
  margin-top: 3px !important;
}

#date-picker-dlg-wrapper .example-calendar {
  width: 184px;
  height: 191px;
  background-image: url("images/calendar_example.png");
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}

#widget_DP_range1_lookup .dijitArrowButtonInner,
#widget_DP_range2_lookup .dijitArrowButtonInner,
div.dijitDateTextBox .dijitArrowButtonInner {
  margin-top: 8px;
  width: 16px;
}

#widget_DP_range1_lookup,
div.dijitDateTextBox.dijitTextBox {
  border-color: #CCC;
  background-image: none;
}

div#widget_pentaho_common_DateTextBox_0 {
  margin-top: -3px;
  display: inline-block;
  overflow: hidden;
  height: 31px;
}

div#widget_dijit_form_TextBox_1 {
  border-radius: 4px;
  margin-left: 5px;
  background-image: none;
}

span#filterContextMenu {
  font-size: 14px;
}

/*Angular Tree control directive*/
[treecontrol] .treeControlView,
treecontrol .treeControlView {
  border: 1px solid #0088CC;
  background-color: #FFFFFF;
  height: 100%;
  overflow: auto;
}

[treecontrol] .arrow-expanded,
treecontrol .arrow-expanded {
  padding: 1px 10px;
  background: url("images/arrow_open.png") no-repeat;
}

[treecontrol] .arrow-collapsed,
treecontrol .arrow-collapsed {
  padding: 1px 10px;
  background: url("images/arrow_closed.png") no-repeat;
}

[treecontrol] .blank,
treecontrol .blank {
  padding: 1px 10px;
}

/* classic tree css */
[treecontrol].tree-classic li.tree-expanded i,
treecontrol.tree-classic li.tree-expanded i {
  padding: 1px 10px;
  background: url('images/folder_open.png') no-repeat;
  width: 22px;
}

[treecontrol].tree-classic li.tree-collapsed i,
treecontrol.tree-classic li.tree-collapsed i {
  padding: 1px 10px;
  background: url("images/folder_closed.png") no-repeat;
  width: 22px;
}

[treecontrol].tree-classic li.tree-normal i,
treecontrol.tree-classic li.tree-normal i {
  padding: 1px 10px;
  background: url("images/file_generic.png") no-repeat;
  width: 22px;
}

[treecontrol].tree-classic li .tree-selected,
treecontrol.tree-classic li .tree-selected {
  background-color: rgba(204, 0, 0, 0.2);
}

.bootstrap .pentaho-toggle .btn.toggle-on.active {
}

.bootstrap .pentaho-toggle .btn.toggle-on.inactive {
  background-image: none;
  background-color: #FFF;
  color: #FFF;
  text-shadow: none;
}

.bootstrap .pentaho-toggle .btn.toggle-off.active {
  background-image: none;
  background-color: #F8F8F8;
  color: #000;
  text-shadow: none;
}

.bootstrap .pentaho-toggle .btn.toggle-off.inactive {
  background-image: none;
  background-color: #FFF;
  color: #FFF;
  text-shadow: none;
}

.pentaho-calendar-icon,
.angular-dojo.dateTimePicker .pentaho-dropdownbutton-outer {
  padding: 6px;
  background: none;
  width: 16px;
  border: none;
  margin-left: 4px;
}

.angular-dojo.dateTimePicker .pentaho-dropdownbutton-inner {
  background-image: url('images/calendar_icon.png');
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 17px;
  width: 16px;
  font-size: 0px;
}

.angular-dojo.dateTimePicker .pentaho-dropdownbutton-inner.disabled {
  background-image: url('images/calendar_icon_disabled.png');
}

.tundra .dijitDownArrowButton input[type='text'].dijitArrowButtonInner {
  border: none;
}

.tundra table.dijitValidationTextBox .dijitButtonContents,
.tundra table.dijitValidationTextBox .dijitArrowButtonInner {
  padding-top: 0px;
  padding-bottom: 0px;
}

.bootstrap DIV select {
  border: 1px solid #CCC;
  border-radius: 0px !important;
  --webkit-box-shadow: none;
  --moz-box-shadow: none;
  box-shadow: none;
}

#standardDialog .dialogMessageBar span.dlgError {
  background-image: url("images/no.png");
  vertical-align: middle;
  height: auto;
  padding-left: 29px;
  padding-top: 0px;
  color: #333;
  font-size: 13px;
  overflow: hidden;
  max-height: 57px;
  line-height: 19px;
}

#standardDialog .dialogMessageBar {
  margin-bottom: 10px;
  flex: none;
}

#standardDialog #dialogMessageBar2 {
  padding: 12px;
  height: auto;
  background-color: #fefde7;
  border-color: #cacacb;
  margin-top: 10px;
}

#sharePanelRemoveButton {
  margin-left: 5px;
}

/* Folder tree styles */
.leaf-widget {

  /*font-size: 13px;*/
}

.leaf-widget .gwt-TreeItem > table {
  color: #333;
}

.leaf-widget .gwt-TreeItem:hover > table {
  background-color: #E0E0E0;
  color: #414141;
}

.leaf-widget .gwt-TreeItem-selected > table,
.leaf-widget .gwt-TreeItem-selected:hover > table {
  background-color: rgba(204, 0, 0, 0.2);
}

.leaf-widget .leaf-widget-hidden .gwt-TreeItem > table {
  width: 100%;
  opacity: .7;
  font-style: italic;
  background-color: #ffffff;
}

.leaf-widget .leaf-widget-hidden .gwt-TreeItem-selected > table {
  width: 100%;
  opacity: .7;
  font-style: italic;
  background-color: #dbdbdb;
}

:is(
  .gwt-TreeItem:hover,
  .gwt-TreeItem-selected,
  .gwt-TreeItem-selected:hover
) .icon-folder {
  background-image: url(images/folder_16.png);
  background-repeat: no-repeat;
}

.open > table :is(
  .gwt-TreeItem-selected,
  .gwt-TreeItem-selected:hover
) .icon-folder {
  background-image: url(images/folder_16-open.png);
  background-repeat: no-repeat;
}

.gwt-TreeItem > table > tbody > tr > td:first-child {
  padding-left: 5px;
}

.select-folder-toolbar .toolbar-button-focus-panel {
  align-self: center;
}

.select-folder-tree {
  --select-folder-line-height: 20px;

  min-height: calc(8 * var(--select-folder-line-height));
  height: calc(18 * var(--select-folder-line-height));
  overflow: hidden auto;

  border: 1px solid #CCC;
  border-top: none;
  background-color: white;
}

.select-folder-tree :is(
  .tree-item-expanded,
  .tree-item-collapsed,
  .leaf-widget.parent-widget
) > table > tbody > tr > td > img {
  height: calc(1em * 16/var(--typ-body-font-size-px)) !important;
  width: calc(1em * 16/var(--typ-body-font-size-px)) !important;

  background-size: contain !important;
}

/* Make sure an item which no longer has children does not show the arrow image. */
.select-folder-tree .leaf-widget:not(.parent-widget) > table > tbody > tr > td > img {
  display: none;
}

#sidepanel #sidepaneltabset > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

#sidepanel #sidepaneltabset > div[tabid=datatab] > span {
  max-width: 48px;
}

#sidepanel #sidepaneltabset > div[tabid=formattab] > span {
  max-width: 80px;
}

#sidepanel #sidepaneltabset > div[tabid=generaltab] > span {
  max-width: 62px;
}

.fieldListTree .attribute {
  background-image: url('images/gemBar_level.png');
  background-repeat: no-repeat;
}

.fieldListTree .attribute:hover {
  background-image: url('images/gemBar_level.png');
  background-repeat: no-repeat;
}

.fieldListTree .measure {
  background-image: url('images/gemBar_measure.png');
  background-repeat: no-repeat;
}

.fieldListTree .measure:hover {
  background-image: url('images/gemBar_measure.png');
  background-repeat: no-repeat;
}

/* styling for formatCombo */
.dijitMenuItemHover {
  background-color: #E0E0E0;
}

.dijitMenuItemSelected {
  background-color: #E0E0E0;
}

.pentahoFormatCombo .dijitPlaceHolder {
  padding-top: 8px;
}

.pentahoFormatCombo INPUT.dijitInputInner {
  padding-left: 4px !important; /* only doing this to get past dojo's usage of !important */
  height: 33px;
}

.dijitMenu.dijitComboBoxMenu {
  background-color: #ffffff;
  padding: 2px;
}

.dijitReset.dijitRight.dijitButtonNode.dijitArrowButton.dijitDownArrowButton.dijitArrowButtonContainer {
  border-radius: 4px;
  border-left: none;
  width: 22px;
}

#DP_range1 #widget_DP_range1_lookup,
#DP_range2 #widget_DP_range2_lookup,
div.dijitDateTextBox.dijitTextBox .dijitReset.dijitRight.dijitButtonNode.dijitArrowButton.dijitDownArrowButton.dijitArrowButtonContainer {
  background-color: #cc0000;
  color: #fff;
  border-radius: 3px;
}

#DP_range1 #widget_DP_range1_lookup,
#DP_range2 #widget_DP_range2_lookup,
div.dijitDateTextBox.dijitTextBox .dijitReset.dijitRight.dijitButtonNode.dijitArrowButton.dijitDownArrowButton.dijitArrowButtonContainer input {
  margin: 8px 0 0 3px;
  background: url(images/calendar-white.png) no-repeat !important;
}

.tundra .pentahoFormatCombo.dijitComboBox,
.tundra .pentahoFormatCombo.dijitComboBox .dijitButtonNode {
  border-color: #CCC;
  border-radius: 0;
  background-color: #ffffff;
}

.tundra .pentahoFormatCombo.dijitTextBox {
  background-image: none;
  margin: 0px;
}

.tundra .pentahoFormatCombo.dijitComboBox .dijitArrowButton input[type='text'] {
  border: none;
}

/* end styling for formatCombo */
#datasourcesListTable {
  padding: 0;
}

#datasourcesListTable > table {
  border-bottom: 1px solid #e0e0e0;
}

/* start for styling manage data sources dialog for safari browser */
.safari #datasourceAdminDialog .gwt-ScrollTable {
  --scrollbar-width: 0px;
}

.safari #datasourceAdminDialog .gwt-ScrollTable .headerWrapper .headerTable {
  width: calc(100% - var(--scrollbar-width)) !important;
  box-sizing: border-box;
}

.safari #datasourceAdminDialog .gwt-ScrollTable .headerWrapper {
  background-color: #666666;
  border: 1px solid #CCCCCC !important;
  border-right: 1px solid #99BEDB;
}

.safari #datasourceAdminDialog .gwt-ScrollTable .headerTable tr > td {
  border-width: 0;
}

.safari #datasourceAdminDialog .gwt-ScrollTable .headerTable tr > td:last-of-type {
  border-left-width: 1px;
}

.safari #datasourceAdminDialog .gwt-ScrollTable :is(.headerWrapper, .dataWrapper) {
  width: 100% !important;
  box-sizing: border-box;
}

.safari #datasourceAdminDialog .gwt-ScrollTable .dataWrapper .dataTable {
  width: 100% !important;
  box-sizing: border-box;
}

.safari #datasourceAdminDialog .gwt-ScrollTable :is(.headerWrapper .headerTable, .dataWrapper .dataTable) td {
  width: 50% !important;
  box-sizing: border-box;
}

.safari #datasourceAdminDialog .gwt-ScrollTable :is(.headerWrapper .headerTable, .dataWrapper .dataTable) td:last-child {
  padding-right: 10px;
}
/* end for styling manage data sources dialog for safari browser */

:where(.responsive#general-datasource-window) #general-settings-box {
  box-sizing: border-box;
}

:where(.responsive#general-datasource-window) #deck-options-list {
  min-height: calc(1em * 450/var(--typ-body-font-size-px));
}

html.bootstrap .popover {
  border-radius: 4px;
  border: 1px solid #CCC;
  background: #FFF;
  -webkit-box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, .2);
  box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, .2);
}

html.bootstrap .popover-content {
  padding: 15px;
}

html.bootstrap .popover.right .arrow {
  border-right-color: #ccc;
}

html.bootstrap .popover.left .arrow {
  border-left-color: #ccc;
}

html.bootstrap .popover.top .arrow {
  border-top-color: #ccc;
}

html.bootstrap .popover.bottom .arrow {
  border-bottom-color: #ccc;
}

html.bootstrap .popover.right .arrow:after {
  border-right-color: #fff;
}

html.bootstrap .popover.left .arrow:after {
  border-left-color: #fff;
}

html.bootstrap .popover.top .arrow:after {
  border-top-color: #fff;
}

html.bootstrap .popover.bottom .arrow:after {
  border-bottom-color: #fff;
}

.bootstrap .btn.btn-large,
.bootstrap .btn.btn-large:link,
.bootstrap .btn.btn-large:visited,
.bootstrap .btn.btn-large:hover,
.bootstrap .btn.btn-large:active,
.bootstrap .btn.btn-large:focus {
  background: transparent;
  filter: none;
  font-size: 14px;
  line-height: 20px;
  color: #CC0000;
  padding: 9px 14px;
  font-family: opensansregular, Helvetica, Arial, Sans serif;
  border-radius: 4px;
  border: 1px solid #CC0000;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}

.bootstrap .btn.btn-large:hover,
.bootstrap .btn.btn-large:active,
.bootstrap .btn.btn-large:focus {
  background: #CC0000;
  color: #FFF;
}

/* lighter gray with white text */
.bootstrap .btn.btn-large.disabled,
.bootstrap .btn.btn-large.disabled:link,
.bootstrap .btn.btn-large.disabled:visited,
.bootstrap .btn.btn-large.disabled:hover,
.bootstrap .btn.btn-large.disabled:active,
.bootstrap .btn.btn-large.disabled:focus
.bootstrap .btn.btn-large[disabled],
.bootstrap .btn.btn-large[disabled]:link,
.bootstrap .btn.btn-large[disabled]:visited,
.bootstrap .btn.btn-large[disabled]:hover,
.bootstrap .btn.btn-large[disabled]:active,
.bootstrap .btn.btn-large[disabled]:focus {
  background: #E4E4E4;
  color: #999;
}

#uploadAnalysisButton {
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 18px;
}

#domainIdText {
  height: auto !important;
  padding-top: 5px;
  padding-bottom: 5px;
}

#database-options-box input,
#connection-name-text {
  padding-top: 5px;
  padding-bottom: 5px;
}

select#datasources {
  padding: 0;
  height: auto;
}

.empty-panel .pentaho-button {
  font-size: 14px;
}

/* Home Screen */
.bootstrap #recentsContianer .widget-panel.well#recents .content-panel,
.bootstrap #favoritesContianer .widget-panel.well#favorites .content-panel {
  border: 1px solid #CCC;
}

.bootstrap h3 {
  font-size: 24px !important;
  color: #333 !important;
}

.empty-message {
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

.bootstrap .widget-panel .tab-content {
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

.bootstrap .widget-panel .nav-tabs {
  border: 0 none;
  border-bottom: 1px solid #CCC;
  background: #FFF !important;
  filter: none;
}

.bootstrap .widget-panel#getting-started .nav-tabs > li > a,
.bootstrap .widget-panel#getting-started .nav-tabs > li > a:link,
.bootstrap .widget-panel#getting-started .nav-tabs > li > a:visited,
.bootstrap .widget-panel#getting-started .nav-tabs > li > a:hover,
.bootstrap .widget-panel#getting-started .nav-tabs > li > a:active,
.bootstrap .widget-panel#getting-started .nav-tabs > li > a:focus,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:link,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:visited,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:hover,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:active,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:focus {
  border: 1px solid transparent;
  border-top: 4px solid transparent;
  padding: 6px 15px;
  background: transparent;
  color: #999;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  font-size: 14px;
  line-height: 22px;
  width: auto;
}

.bootstrap .widget-panel#getting-started .nav-tabs > li > a:hover,
.bootstrap .widget-panel#getting-started .nav-tabs > li > a:active,
.bootstrap .widget-panel#getting-started .nav-tabs > li > a:focus,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:hover,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:active,
.bootstrap .widget-panel#launch-widget .nav-tabs > li > a:focus {
  color: #CC0000;
}

.bootstrap .widget-panel#getting-started .nav-tabs > li.active > a,
.bootstrap .widget-panel#getting-started .nav-tabs > li.active > a:link,
.bootstrap .widget-panel#getting-started .nav-tabs > li.active > a:visited,
.bootstrap .widget-panel#getting-started .nav-tabs > li.active > a:hover,
.bootstrap .widget-panel#getting-started .nav-tabs > li.active > a:active,
.bootstrap .widget-panel#getting-started .nav-tabs > li.active > a:focus,
.bootstrap .widget-panel#launch-widget .nav-tabs > li.active > a,
.bootstrap .widget-panel#launch-widget .nav-tabs > li.active > a:link,
.bootstrap .widget-panel#launch-widget .nav-tabs > li.active > a:visited,
.bootstrap .widget-panel#launch-widget .nav-tabs > li.active > a:hover,
.bootstrap .widget-panel#launch-widget .nav-tabs > li.active > a:active,
.bootstrap .widget-panel#launch-widget .nav-tabs > li.active > a:focus {
  border-left: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #FFF;
  border-top: 4px solid #cc0000;
  color: #cc0000;
}

/* Increase specificity to override bootstrap-namespaced.css focus rule*/
.bootstrap.bootstrap a:focus-visible {
  outline:var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}

/* reporting */
.tundra .dijitInputContainer input {
  padding: 1px !important;
  background: #fff;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input#widthedit {
  padding: 2px 2px;
}

input#csvSeparator {
  padding: 2px 10px 2px 10px;
  width: 40px;
  margin-left: 10px;
}

#marginFieldSet input {
  padding: 2px;
}

#marginFieldSet {
  padding: 0;
  margin: 0;
}

.tundra .tabpanel .section-header-inner {
  min-height: 0;
  margin-top: 10px;
}

.dijitTooltipConnector {
  display: none !important;
}

#groupsorttable,
#fieldsorttable {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 10px;
}

#groupsorttable .pentaho-listitem-hover,
#fieldsorttable .pentaho-listitem-hover {
  background: #FFF;
  color: #333;
  cursor: default;
}

#groupsorttable .pentaho-listitem select,
#fieldsorttable .pentaho-listitem select {
  cursor: pointer;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 2px 5px;
}

.sortTableCell {
  padding-right: 0;
  padding-left: 5px;
}

.reportControlSection {
  background-color: #FFF;
  border: 1px solid #CCC;
}

.layoutItem-group,
.layoutItem-column {
  padding-top: 2px;
  margin: 4px;
}

.reportControlSectionTitle {
  padding: 0 10px 0 0;
  line-height: 26px;
}

#gwt_FileUpload_uploadButton {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-left: 5px;
}

#csvModelDataTable {
  min-width: 640px;
}

#csvModelDataTable input {
  padding-top: 1px;
  padding-bottom: 1px;
}

.welcome-img.welcome-img {
  background-image: url(images/gettingStarted_welcome_graphic.png);
  width: 100%;
  height: auto;
  aspect-ratio: 540/372;
  flex: none;
  background-origin: content-box;
  background-size: contain;
  background-position: center;
}

.welcome-img.welcome-img:hover,
.welcome-img:focus-visible {
  background-image: url(images/gettingStarted_welcome_graphic_over.png);
}

button#preview,
button#preview:link,
button#preview:visited,
button#preview:hover,
button#preview:active {
  background: none !important;
  color: #005EAA;
  padding: 0;
  line-height: 28px;
  margin-left: 10px;
}

button#preview:hover,
button#preview:active {
  color: #0F2B5B;
  text-decoration: underline !important;
}

button#preview.disabled,
button#preview.disabled:link,
button#preview.disabled:visited,
button#preview.disabled:hover,
button#preview.disabled:active,
button#preview[disabled],
button#preview[disabled]:link,
button#preview[disabled]:visited,
button#preview[disabled]:hover,
button#preview[disabled]:active {
  background: none !important;
  text-decoration: none !important;
}

.scrollable-horizontally {
  overflow-x: auto;
}

.bootstrap #recentsContianer .nav-tabs > li,
.bootstrap #favoritesContianer .nav-tabs > li {
  /* Ensure enough space for the focus-visible outline. */
  margin: 4px;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:link,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:visited,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:active,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:focus,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:link,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:visited,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:active,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:focus {
  background: #FFF;
  color: #cc0000;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  border-bottom: 1px solid #CCC;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:active,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:focus,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:active,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:focus {
  background: #CC0000;
  color: #FFF;
}

/* Recents / Favorites icons - normal state */
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-unknown,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-unknown,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-html,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-html {
  background: url("images/file_generic_32.png");
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-url,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-url {
  background: url("images/file_url_32.png");
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-xanalyzer,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-xanalyzer {
  background: url("images/file_analysis_32.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-xdash,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-xdash {
  background: url("images/file_dashboard_32.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-xaction,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-xaction {
  background: url("images/file_action_32.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-ktr,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-ktr {
  background: url("images/kettle_transformation_32.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-prpt,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-prpt {
  background: url("images/prptFile_32.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .file-prpti,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .file-prpti {
  background: url("images/prptiFile_32.png") no-repeat;
}

/* Recents / Favorites icons - hover state */
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-unknown,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-unknown,
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-html,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-html {
  background: url("images/file_generic_32_white.png");
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-url,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-url {
  background: url("images/file_url_32_white.png");
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-xanalyzer,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-xanalyzer {
  background: url("images/file_analysis_32_white.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-xdash,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-xdash {
  background: url("images/file_dashboard_32_white.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-xaction,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-xaction {
  background: url("images/file_action_32_white.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-ktr,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-ktr {
  background: url("images/kettle_transformation_32_white.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-prpt,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-prpt {
  background: url("images/prptFile_32_white.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .file-prpti,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .file-prpti {
  background: url("images/prptiFile_32_white.png") no-repeat;
}

/* Recents / Favorites favorite icon */
.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .favorite-off,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .favorite-off {
  background: url("images/favorite-off.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .favorite-off,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .favorite-off {
  background: url("images/favorite-off_hover_unselected_white.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a .favorite-on,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a .favorite-on {
  background: url("images/favorite-on.png") no-repeat;
}

.bootstrap #recentsContianer .nav-tabs.nav-stacked > li > a:hover .favorite-on,
.bootstrap #favoritesContianer .nav-tabs.nav-stacked > li > a:hover .favorite-on {
  background: url("images/favorite-on_hover_selected_white.png") no-repeat;
}
:is(#recents-content-panel, #favorites-content-panel) .nav-tabs.nav-stacked li > a
:is(.row-fluid, .row-fluid > div) {
  display: flex;
  align-items: center;
}

:is(#recents-content-panel, #favorites-content-panel) .nav-tabs.nav-stacked li > a .row-fluid > div > i {
  flex: none;
}

:is(#recents-content-panel, #favorites-content-panel) .nav-tabs.nav-stacked li > a .row-fluid > div span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.pentaho-page-background#pageLoading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}

.analysisArea .pentaho-editbutton,
.analysisArea .pentaho-addbutton,
.analysisArea .pentaho-deletebutton {
  margin-left: 5px;
}

.analysisArea .helpIcon {
  margin: 0 0 0 5px;
}

#cmdShowChart {
  margin-left: 5px;
}

.pentaho-page-background#pageLoading .page-loading-icon {
  background: none;
  position: relative !important;
  -ms-animation: uil-rolling-anim 1s linear infinite;
  -moz-animation: uil-rolling-anim 1s linear infinite;
  -webkit-animation: uil-rolling-anim 1s linear infinite;
  -o-animation: uil-rolling-anim 1s linear infinite;
  animation: uil-rolling-anim 1s linear infinite;
  margin-right: 10px;
}

.pentaho-page-background#pageLoading .page-loading-icon:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 8px;
  border-radius: 16px 16px 0 0;
  border-color: #cc0000;
  border-style: solid;
  border-width: 2px;
  border-bottom-width: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.pentaho-page-background#pageLoading .page-loading-icon:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border-color: #F8F8F8;
  border-style: solid;
  border-width: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Home Screen Buttons */

/* Home Screen Buttons */

#buttonWrapper button,
#buttonWrapper button:link,
#buttonWrapper button:visited,
#buttonWrapper button:hover,
#buttonWrapper button:active,
#buttonWrapper button:focus {
  background: transparent;
  color: #cc0000;
  filter: none;
  border-radius: 4px;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 9px 15px;
  border: 1px solid #cc0000;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#buttonWrapper button:hover,
#buttonWrapper button:active,
#buttonWrapper button:focus {
  background: #CC0000;
  border-color: #CC0000;
  filter: none;
  color: #FFF;
}

/* Global Styles */

.pentaho-page-background {
  background: #FFF;
}



.pluginListItem .pluginActionContainer button {
  margin-top: 1px;
  line-height: 32px;
  padding: 0 14px;
}

button.pentaho-button.installVersionButton,
button.pentaho-button.installVersionButton:link,
button.pentaho-button.installVersionButton:visited,
button.pentaho-button.installVersionButton:hover,
button.pentaho-button.installVersionButton:active,
button.pentaho-button.installVersionButton.install,
button.pentaho-button.installVersionButton.install:link,
button.pentaho-button.installVersionButton.install:visited,
button.pentaho-button.installVersionButton.install:hover,
button.pentaho-button.installVersionButton.install:active,
button.pentaho-button.uninstallButton,
button.pentaho-button.uninstallButton:link,
button.pentaho-button.uninstallButton:visited,
button.pentaho-button.uninstallButton:hover,
button.pentaho-button.uninstallButton:active {
  line-height: 32px;
  padding: 0 14px;
  border: 1px solid #cc0000;
  background: transparent;
  filter: none;
}

button.pentaho-button.installVersionButton.install:hover,
button.pentaho-button.installVersionButton.install:active,
button.pentaho-button.installVersionButton:hover,
button.pentaho-button.installVersionButton:active,
button.pentaho-button.uninstallButton:hover,
button.pentaho-button.uninstallButton:active {
  border: 1px solid #0F2B5B;
  background: #0F2B5B;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

button.pentaho-button.installVersionButton.update,
button.pentaho-button.installVersionButton.update:link,
button.pentaho-button.installVersionButton.update:visited,
button.pentaho-button.installVersionButton.update:hover,
button.pentaho-button.installVersionButton.update:active {
  background: #F4A425;
  border-color: #F4A425;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

button.pentaho-button.installVersionButton.update:hover,
button.pentaho-button.installVersionButton.update:active {
  background: #E6910C;
  border-color: #E6910C;
}

button.pentaho-button.installVersionButton.upToDate,
button.pentaho-button.installVersionButton.upToDate:link,
button.pentaho-button.installVersionButton.upToDate:visited,
button.pentaho-button.installVersionButton.upToDate:hover,
button.pentaho-button.installVersionButton.upToDate:active {
  background: transparent;
  border-color: #cc0000;
  color: #cc0000;
  filter: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

button.pentaho-button.uninstallButton:disabled,
button.pentaho-button.uninstallButton:disabled:link,
button.pentaho-button.uninstallButton:disabled:visited,
button.pentaho-button.uninstallButton:disabled:hover,
button.pentaho-button.uninstallButton:disabled:active {
  line-height: 32px;
  padding: 0 14px;
  border: 1px solid #E4E4E4;
  background: #E4E4E4;
  color: #888;
  filter: none;
}

.bootstrap.admin-perspective .pentaho-tab-deck-panel,
.filterBar,
.filterBar .filterContainer .multiselect button.btn.btn-primary.dropdown-toggle,
.bootstrap .filterBar .filterContainer .multiselect .dropdown-menu,
.bootstrap input.search,
.bootstrap .filteredPluginsContainer ul > li,
.bootstrap .filteredPluginsContainer ul > li:last-of-type,
.pluginListItem .dev-stage,
.bootstrap .modal .modal-dialog,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .sectionHeader,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .pluginDetailBottom,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .pluginDetailBottom > div.devStageName,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .pluginDetailTop .pluginDetailLeft .versionSelectDropdown button.btn.btn-primary.dropdown-toggle,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .pluginDetailTop .pluginDetailLeft .versionSelectDropdown .dropdown-menu,
.bootstrap .modal.stagesInfoDialog .sectionHeader {
  border-color: #CCC;
}

body.bootstrap .modal.pluginDetailDialog,
body.bootstrap .modal.confirmationDialog {
  border: 0 none;
}

.bootstrap .filteredPluginsContainer ul > li:hover {
  background: #CCCCCC;
}

.bootstrap.admin-perspective .pentaho-tab-deck-panel {
  margin-top: -1px;
}

.bootstrap .filteredPluginsContainer ul > li .pluginName,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .pluginHeaderInfo .pluginName,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .sectionHeader {
  color: #414141;
}

.filterBar {
  background: #F0F0F0;
}

.bootstrap .filterBar a,
.bootstrap .filterBar a:link,
.bootstrap .filterBar a:visited,
.bootstrap .modal.pluginDetailDialog a,
.bootstrap .modal.pluginDetailDialog a:link,
.bootstrap .modal.pluginDetailDialog a:visited {
  color: #414141;
}

.bootstrap .filterBar a:hover,
.bootstrap .filterBar a:active,
.bootstrap .modal.pluginDetailDialog a:hover,
.bootstrap .modal.pluginDetailDialog a:active {
  color: #0F2B5B
}

.filterBar .filterContainer .multiselect button.btn.btn-primary.dropdown-toggle,
body.bootstrap .modal.pluginDetailDialog .pluginDetail .pluginDetailTop .pluginDetailLeft .versionSelectDropdown button.btn.btn-primary.dropdown-toggle {
  color: #666;
}

.bootstrap .filterBar .filterContainer .multiselect .dropdown-menu > li > a {
  color: #333;
}

.bootstrap .filterBar .filterContainer .multiselect .dropdown-menu > li > a:hover,
.bootstrap .filterBar .filterContainer .multiselect .dropdown-menu > li > a:focus,
.bootstrap .filterBar .filterContainer .multiselect .dropdown-submenu:hover > a,
.bootstrap .filterBar .filterContainer .multiselect .dropdown-submenu:focus > a {
  background: #E6EFF6;
}

.bootstrap .filterBar .filterContainer .multiselect .dropdown-menu .divider {
  margin: 9px 0;
  background-color: #CCC;
}

.bootstrap .filteredPluginsContainer ul > li .pluginAuthor,
.bootstrap .filteredPluginsContainer ul > li {
  color: #666;
}

.infoBar {
  background: #CC0000;
  border-color: #CC0000;
}

.infoBar:hover,
.infoBar:active {
  background: #7C0B2B;
  border-color: #7C0B2B;
}

body.bootstrap .modal.pluginDetailDialog .pluginDetail {
  color: #333;
}

body.bootstrap .modal.confirmationDialog .dialog div.title {
  background: none;
  font-size: 24px;
  line-height: 30px;
  font-family: OpenSansLight;
  color: #333;
  padding-bottom: 20px;
}

body.bootstrap .modal.confirmationDialog .dialog div.body {
  line-height: 20px;
  color: #333;
  padding-bottom: 20px;
}

.IE11 table.dijitSelect.dijitDownArrowButton td.dijitButtonContents, .IE11 table.dijitSelect.dijitDownArrowButton td.dijitArrowButton {
  background: transparent;
}

.dialog-content select.form-input {
  height: 33px;
}

#protocolPanel tr td {
  display: block;
}

#protocolPanel select {
  width: 220px;
}

.datePickerDays .datePickerDayIsValue,
.datePickerDays .datePickerDayIsHighlighted {
  background-color: #CC0000;
  color: #FFFFFF;
}

.hyperlink {
  color: #7C0B2B;
}

.is-hidden {
  display: none;
}

.users-roles-list,
.users-roles-selection-list {
  width: calc(200px - 2 * var(--focus-ring-padding)) !important;
  margin: var(--focus-ring-padding);
}

.tree-scroll-panel > * > :focus-visible {
  z-index: 0 !important;
  outline: var(--focus-ring) !important;
}

/* Dialog uses empty rows for V-spacing. */
.import-dialog .dialog-content {
  --layout-gap-v: 0;
}

.file-upload-panel {
  align-items: center;
}

.file-upload-panel input {
  flex: auto;
  min-width:0;
}

.file-upload-panel .gwt-HTML {
  display: none;
}

.file-upload-panel button  {
  flex: none;
}

/* Content wrapper */
.import-dialog-disclosure-panel > tbody > tr:nth-child(2) > td > * {
  flex: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible !important;
}

.import-dialog-disclosure-content-panel {
  flex: auto;
}

/* responsive content for home page above 810px and below 930px */
@media (max-width:930px) {

  #getting-started #tab2 #sample-details #sample-details-content,
  #getting-started #tab3 #tutorial-details #tutorial-details-content {
    width: 60%;
  }
}

/* responsive content for home page below 810px */
@media (max-width: 810px) {

  /* targets the button wrapper in home page */
  #buttonWrapper {
    width: 100%;
  }

  /* targets the getting started column */
  .main-container > .row-fluid > div.span9 {
    width: 100%;
    margin-left: 0;
  }

  /* targets the welcome tab in the getting started */
  div#getting-started-media-content {
    position: unset;
    width: 100%;
  }

  #getting-started div.details-content {
    width: auto;
  }

  #getting-started div.details-content p {
    text-align: center;
    padding-right: 20px;
  }

  #getting-started div.details-content > div > p br {
    content: "";
  }

  #getting-started div.details-content > div > p br:after {
    content: " ";
  }

  #getting-started-message-content div#sub-messages {
    left: 0;
  }

  #video-container {
    padding: 15px;
  }

  /* targets the samples tab and tutorials tab in the getting started */
  #getting-started div.selector-column {
    flex: auto;
    position: unset;
    width: auto;
    height: auto;
  }

  #getting-started div.vertical-selector {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #getting-started .detail-title {
    text-align: center;
  }

  #getting-started #tab2 #sample-details #sample-details-content,
  #getting-started #tab3 #tutorial-details #tutorial-details-content {
    width: auto;
    padding: 20px 20px 0;
  }

  #getting-started #tab2 div.details-img,
  #getting-started #tab3 div.details-img {
    width: 100%;
    background-size: contain;
    background-position: center;
    padding-bottom: calc(1em * 10/var(--typ-body-font-size-px));
  }

  #getting-started div.card.selected {
    border-bottom: 4px solid #CC0000;
    border-top: 1px solid #CCC;
  }

  #getting-started #tab3 .pentaho-button,
  #getting-started #tab3 .pentaho-button {
    width: auto;
    font-size: small;
  }
}

/* responsive content for home page below 550px */
@media (max-width: 550px) {

  /* targets the recents and favorites columns */
  .main-container > .row-fluid > .span9 > .row-fluid:last-child .span6 {
    width: 100%;
    margin-left: 0;
  }

  /* targets the tabs in the getting started */
  .bootstrap .widget-panel#getting-started ul.nav-tabs > li > a:link {
    padding: calc(1em * 6 / var(--typ-body-font-size-px));
  }

  /* targets the samples and tutorials tab in the getting started */
  #getting-started #tab2 .pentaho-button,
  #getting-started #tab3 .pentaho-button {
    font-size: xx-small;
    line-height: 0;
  }

  #getting-started .card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.templatePickerImg {
  margin-top: var(--focus-ring-padding);
}

/* region pentaho-common-dialog */

.responsive.pentaho-common-dialog .dijitDialogPaneContent {
  width: unset !important;
  height: unset !important;
  overflow: unset !important;
}

/* endregion */

/* region TemplatePicker Dialog */

#templatePickerDialog .pentaho-selection-dialog-inner {
  height: auto !important;
}

.template-grid {
  display: flex !important;
  flex-wrap: wrap;
}

.template-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 33%;
}

.template-div div {
  line-height: 50px;
}

/* endregion */
